如何防止在更改窗口大小時表格列不重疊

Question

我正在使用表來顯示信息。當我調整大小（最小化窗口）時，表格柱重疊。這是我的代碼。

<table style="width:100%;table-layout:fixed"> 
      <tr style="border-bottom-style: none"> 
       <td>ID</td> 
       <td>postalAddress</td> 
       <td>emailAddress</td> 
      </tr> 
      <tr style="border-bottom-style: none"> 
       <td>123</td> 
       <td>1234,west street</td> 
       <td>sample1@gmail.com</td> 
      </tr> 
     </table> 

此表信息顯示良好。但是，當我最小化窗口時，「emailAddress」與郵政地址重疊。是否有任何屬性添加到CSS不重疊的colums？

Answer 1

您的款式選擇會告訴您的桌子允許重疊。首先你要選擇表格的寬度總是窗口的寬度。然後，選擇「table-layout」列的寬度始終等於窗口寬度，而不考慮列的內容。因此，縮小窗口大小時發生的情況是每列不分內容均勻縮小。當您縮小列通過它的最長內容點時，該內容將開始重疊到下一列。

從樣式中刪除「table-layout：fixed」將防止重疊，但會根據其內容的長度設置列大小。你也可以刪除「寬度：100％」，這也將解決問題，但要求你選擇一個像素寬度。您可以使用javascript選項來檢測窗口寬度並修改樣式。類似這樣的：

<table id="table" style="width:100%;table-layout:fixed"> 
    <tr style="border-bottom-style: none"> 
     <td>ID</td> 
     <td>postalAddress</td> 
     <td>emailAddress</td> 
    </tr> 
    <tr style="border-bottom-style: none"> 
     <td>123</td> 
     <td>1234,west street</td> 
     <td>sample1@gmail.com</td> 
    </tr> 
</table> 

<script type="text/javascript" >  
window.onresize = function() { 
    if (window.innerWidth > 300) { 
     document.getElementById("table").style.width = "100%"; 
    } 
    else { 
     document.getElementById("table").style.width = "300px"; 
    } 
} 
</script>