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」），它不會動態變化。 我試着加入了高度的「動態」 height屬性，以我的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; } 

這應該確保你有沒有不需要填充和你的細胞周圍。