html：設置列寬度

Question

我想爲每個列設置一個自定義。但是，由於未知原因，例如，如果我增加col 3的大小，col 2的大小就會減小。 有誰知道爲什麼會有這種行爲？

<table class="table" style="table-layout: fixed;width:1165px"> 
    <thead> 
     <th style="width:137px">Col 1</th> 
     <th style="width:137px">Col 2</th> 
     <th style="width:98px">Col 3</th> 
     <th style="width:98px">Col 4</th> 
     <th style="width:98px">Col 5</th> 
     <th style="width:72px">Col 6</th> 
     <th style="width:104px">Col 7</th> 
     <th style="width:101px">Col 8</th> 
     <th style="width:80px">Col 9</th> 
     <th style="width:60px">Col 10</th> 
    </thead> 
</table> 

謝謝。

Answer 1

代碼中所有列的寬度合併爲985px（而不是1165px）。

而不是使用固定的寬度使用像素，使用百分比將是有益的。除了其他優勢之外，它還會針對不同的屏幕尺寸重新調整大小。

例如...

<table class="table"> 
    <thead> 
     <th style="width: 12%">Col 1</th> 
     <th style="width: 12%">Col 2</th> 
     <th style="width: 11%">Col 3</th> 
     <th style="width: 11%">Col 4</th> 
     <th style="width: 11%">Col 5</th> 
     <th style="width: 10%">Col 6</th> 
     <th style="width: 11%">Col 7</th> 
     <th style="width: 10%">Col 8</th> 
     <th style="width: 6%">Col 9</th> 
     <th style="width: 6%">Col 10</th> 
    </thead> 
</table> 

如果你想表本身有一個固定的寬度，那麼你可以寬度樣式簡單地添加到整個表：<table class="table" style="width: 1028px">（改爲你的寬度尋找，當然）。