Question

我有一个使用bootstrap的网络应用程序，使其适合移动设备。为了在视觉上将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; }

这应该确保您的细胞内和周围没有不需要的填充。

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

1 个答案: