CSS - 调整浏览器大小时，TD周围的底部边框被切断

Question

我有一个使用引导程序使其适合移动设备的网络应用程序。 为了在视觉上将 3 个项目组合在一起，我创建了一个类，在这三个项目出现的表格单元格周围放置一个框/边框。 （三项分别是link4、5、5）

这是课程：

 td.lights
 {
   border: 2px solid black;
 }

这是有问题的 HTML - 我已经将它配对到最少的代码，仅用于演示目的。 我注意到的是，当我模拟移动设备（使用 Firefox 的响应式设计视图工具）时，

      <table>
          <tbody>
                  <tr>  

                  <td>link1</td>        
                  <td>link2</td>    
                  <td>link3</td>    
                  <td>&nbsp;</td>
                  <td class="lights">link4&nbsp;/&nbsp;link5&nbsp;/&nbsp;link6</td>

              </p>
          </tbody>
          </table>

在这个表之后，我有这个代码来创建另一个表：

         <P>
            <table class="table table-bordered table-striped">
            <thead>
                                etc...
                            </thead>
                            </table>

当我调整浏览器大小时，表 1 底部的边框会被截断，具体取决于浏览器大小的大小。其他字段看起来不错，但话又说回来，它们周围没有边框。对我来说，我的文本（“link4 / link5 / link6”）上方和下方似乎有一组固定的空间，不会动态变化。 我尝试向我的 td 添加一个高度“动态”高度属性，如下所示：

 td.lights
 {
   border: 2px solid black;
   height: 1em;
 }

但这并没有解决我的问题。
有什么建议？请和谢谢！

Answer 1

据我所知，您的标记中有不少错误：

</p>

应该是：

</tr>

另外，如果你有：

<P>

在您的第二张桌子之前？我会避免用 P 标签包装你的表格，因为这会添加不需要的填充，并且从语义的角度来看没有意义。

先解决这些问题，然后看看会发生什么。其次，我建议 - 在处理表格时 - 使用以下内容：

<table cellpadding="0" cellspacing="0" border="0">

您也可以在 CSS 中使用以下代码：

table, tr, td { margin: 0; padding: 0; border: 0; }

这应该确保您的单元格内部和周围没有多余的填充。