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

我有一个web应用程序，它使用bootstrap使其对移动设备友好。 为了直观地将3个项目组合在一起，我创建了一个类，在这三个项目出现的表格单元格周围放置一个框/边框。（这三个项目是链接4、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>

---

这将确保您的单元格内和周围没有多余的填充物。

谢谢您的建议。我已经全部实现了。就边界而言，现在它切断了左侧与底部的对比。我添加了单元格填充，从而修复了左侧。但有趣的是，现在我有了一个机会问题。当浏览器收缩时，边框正常。。。但当浏览器尺寸增大时，底部会被切断。

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

</p>

</tr>

<P>

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

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