引导导航栏中的表格答案

【问题标题】：Table in bootstrap navigation bar引导导航栏中的表格
【发布时间】：2020-05-28 19:00:33
【问题描述】：

额外的“绿色”部分来自哪里？

我怎样才能摆脱这个？

注意：当我将普通文本放在这里时，我得到了很好的垂直居中格式，但使用表格时却没有。

这是我的 html 结构。

<li class="nav-item">
    <table class="table table-sm table-condensed table-borderless">
        <tbody class="user-logout">
        <tr>
            <td class="text-light">Farhad Hossain</td>
            <td rowspan="2">
                <a href="{{ url_for('dashboard') }}">
                    <img src="{{ url_for('static', filename='profile_pics/'+current_user.trainer.picture) }}"
                         width="56" height="56" class="rounded-circle" alt="">
                </a>
            </td>
        </tr>
        <tr>
            <td><a class="text-decoration-none text-warning" href="{{ url_for('logout') }}">Logout</a></td>
        </tr>
        </tbody>
    </table>
</li>

有希望吗？

【问题讨论】：

标签： html css twitter-bootstrap navigation navbar

【解决方案1】：

我想引导表的默认样式在下面包含大量边距，这在此处可见。您可以尝试通过设置margin-bottom: 0 !important (there is a similar question out here addressing this) 来覆盖它，但通常，作为一个学习曲线，我认为您不应该将表格用于这些目的。表格用于显示数据，作为实际表格，而不是用于对齐事物，但是，我们都首先通过使用表格学习了 HTML 和 CSS，这也有效，除非您需要改变这些事物的顺序或使其具有响应性.

【讨论】：

非常感谢@roye7777777，这对我有用！有没有更好的解决方案可以在没有桌子的情况下完成这项工作？
我建议你尝试使用 float 属性，尽管使用所谓的 clearfix （你可以搜索它，它与使用 clear:both; 结合使用有关）使用float，虽然float有点过时了。一种更先进和现代的对齐方式是使用flexbox。阅读here和here。