Chrome和IE中的第一個表格單元格寬度爲1px

下表中的第一個單元格的寬度比其他表格寬1px。它在Firefox中很好，但不在Chrome和IE中。這似乎與表格單元上的table-layout:fixed,border-collapse:collapse和border的組合有關。Chrome和IE中的第一個表格單元格寬度爲1px

<div style="border:1px red dotted;"> 
<table style="border-collapse: collapse; table-layout:fixed; border-spacing: 0;"> 
    <colgroup> 
     <col width="90px"> 
     <col width="90px"> 
     <col width="90px"> 
    </colgroup> 
    <tbody> 
     <tr> 
      <td style="border-right:1px solid black;">content</td> 
      <td style="border-right:1px solid black;">content</td> 
      <td style="border-right:1px solid black;">content</td> 
     </tr> 
    </tbody> 
</table>

當丁目的開發工具分析的所有細胞被示出爲具有相同的屬性和90像素的寬度，但是第一單元被渲染91px寬。同樣的結果是沒有colgroup和box-sizing:border-box表格單元格。我是否錯過了一些明顯的東西，或者它有點「特色」？

來源

2017-02-15 Jan Pfeifer

你在tds的右邊有1px的邊框。所以當你寫「border-collapse：collapse」時，瀏覽器只會摺疊內部邊界而不是外部邊界。

試試這個：

<table style="border-collapse: collapse; table-layout:fixed; border-spacing: 0;"> 
<colgroup> 
    <col width="90px"> 
    <col width="90px"> 
    <col width="90px"> 
</colgroup> 
<tbody> 
    <tr> 
     <td style="border-right:1px solid black;">content</td> 
     <td style="border-right:1px solid black;">content</td> 
     <td style="/* border-right:1px solid black; */">content</td> 
    </tr> 
</tbody>

來源

2017-02-15 16:57:39 AHBagheri

這並不說明，數學這些計算背後。我的桌子非常有活力，所以我也需要最後的邊框。我的目標是渲染包含邊界的精確寬度的所有列。 Chrome中最後一個單元格的渲染寬度僅爲89px。如果你把它包裝在DIV中，它將和我原來的代碼一樣。 –

它根據填充，邊距和寬度的定義完全有意義。檢查這些：https://www.w3schools.com/css/css_table.asp和https://www.w3schools.com/css/css_boxmodel.asp – AHBagheri

我仍然錯過了你的觀點。我試圖修飾：不同的瀏覽器不同的行爲。沒有填充或保證金應用或設置爲零。同樣的問題是沒有表格邊框和單個單元格。對於表中的單個單元格（表格寬度樣式似乎不會影響它），它應該具有90px的寬度。 Chrome的開發工具「說」它是90px，但是呈現爲91px。如果我刪除框大小：邊界框/ colgroup問題消失。 –

Chrome和IE中的第一個表格單元格寬度爲1px

回答

相關問題