爲什麼它將寬度樣式放在第一個​​或第二個在html表格中/爲什麼這些表格呈現不同？

Question

你能解釋爲什麼這兩個HTML代碼在渲染時會導致不同的外觀？ fiddle1和fiddle2

在代碼中的唯一區別是，在fiddle1style="width: 50px;"是該表的第一行中，而在fiddle2它是第二排。但是這會導致每個寬度不同。

根據Chrome開發工具fiddle1兩個小區/列具有51px寬度（應該是50px反正），和在fiddle2第一細胞/列具有49px寬度和第二寬度50px。

標記在小提琴1

<table> 
    <tr> 
     <td style="width: 50px;">Test</td> 
     <td style="width: 50px;">Testing 1123455</td> 
    </tr> 
    <tr> 
     <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> 
     <td>B</td> 
    </tr> 
</table> 

標記在小提琴2

<table> 
    <tr> 
     <td>Test</td> 
     <td>Testing 1123455</td> 
    </tr> 
    <tr> 
     <td style="width: 50px;">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td> 
     <td style="width: 50px;">B</td> 
    </tr> 
</table> 

CSS兩個小提琴

table { 
    table-layout: fixed; 
    width: 100px; 
} 

td { 
    border: 1px solid black; 
    overflow: hidden; 
} 

Answer 1

也就是說的 '表格的佈局：固定' 的魔法。
如此處指定link

table-layout CSS屬性指定用於佈局單元格，行和列的算法。

當值爲'fixed'時：表和列的寬度由table和col元素的寬度或第一行單元格的寬度設置。後續行中的單元格不會影響列寬。

在您的第一個案例中：正如您指定第一行的列的寬度。渲染算法將獲取寬度並使用該寬度進行渲染。你看到的額外1px，就是邊框寬度。

在第二種情況下：因爲沒有指定第一行的寬度。它採用表格寬度並嘗試調整其中的行列。至於兩列將有三個邊界，我們留下了97px分爲兩列。由於像素不能被分成小數，所以您可以獲得48px和49px的列寬。額外1px爲邊界寬度