Question

下表中的第一个单元格比其他单元格宽1px。它在Firefox中很好，但在Chrome和IE中却没有。这似乎与表格单元格上table-layout:fixed，border-collapse:collapse和border的组合有关。

<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>

在Chome的Dev Tools中进行分析时，所有单元格都显示具有相同属性和90px宽度，但第一个单元格呈现为91px宽。相同的结果是没有colgroup，表格单元格上有box-sizing:border-box。我错过了一些明显的东西，或者它是一种＆＃34;功能＆＃34;？

Answer 1

你在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>

Chrome和IE中的第一个表格单元格1px更宽

1 个答案: