CSS开发技巧(二）：表格合并边框后的单元格宽度计算

前言：

分离边框模型和合并边框模型是表格的两种模型，它通过以下属性确定：

border-collapse:separate(默认值) | collapse | inherit

当采用分离边框模型时，表格单元格宽度是相当清晰的，和盒模型几乎一致。

当使用合并边框模型时，则不太明了，可能产生以下疑问：

（1）两个单元格的边框合并成了一个边框，那么这个边框究竟算谁的呢？

（2）现在各单元格内容区宽度如何计算呢？

示例

    <div id="container">
        <table class="content-table">
            <colgroup>
                <col width='100'>
                <col width='100'>
                <col width='100'>
                <col width='100'>
                <col width='80'>
                <col width='80'>
                <col width='80'>
                <col width='80'>
            </colgroup>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                    <th>物理</th>
                    <th>化学</th>
                    <th>生物</th>
                    <th>总分</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>赵一</td>
                    <td>80</td>
                    <td>90</td>
                    <td>79</td>
                    <td>56</td>
                    <td>56</td>
                    <td>79</td>
                    <td>98</td>
                </tr>
            </tbody>
        </table>
    </div>

CSS：

        #container{
            height: 500px;
            padding: 10px;
            border: 1px solid green;
        }
        .content-table{
            table-layout: fixed;
            border-collapse: collapse;
        }
        .content-table td,.content-table th{
            padding: 1px;
            border: 1px solid blue;
        }

分析

这里每列都被设置了宽度，由于table固定布局根据第一行宽度设置确定每列列宽，那么每一列的列宽将是确定的。现在的问题是，每列单元格的内容区宽度是多少？

事实上，每列内容区宽度分别为：97px,97px,97px,97px,77px,77px,77px,77px,这的确是些意料之外的数字。

第一，将以上数字各加2px的padding,再加上9个1px的边框，则得到表格总宽度721px。我们在chrome浏览器调试工具的Elements标签内，点击table元素，可以发现表格实际宽度的确为721px，如下所示：



第二：我们设置的表格宽度为100px+100px+100px+100px+80px+80px+80px+80px=720px，总宽度为720px与上面所述721px有1px的宽度差。在chrome中查看盒模型的宽度，可以看到，浏览器认为我们设置的宽度的确为720px，如下：



第三，两个宽度不一致的原因在于，720px是浏览器根据我们设置的各列宽度简单相加得到的理论宽度值。然而，浏览器渲染表格有一套略为复杂的机制，721px是实际渲染宽度值。这里来分析一下各列的实际渲染宽度值计算：

（1）每个边框宽度1px，由于合并单元格，这将使得每个单元格左右边框实际都为单个边框的一半，即0.5px；左右边框宽度加起来为0.5px+0.5px=1px；

（2）每个单元格左右内边距1px，则每个单元格边框加上左右内边距为1px+1px*2=3px；

（3）每列宽度则为设置宽度减去3px,即97px,97px,97px,97px,77px,77px,77px,77px。

（4）表格实际宽度：由于第一列左边多出0.5px边框，最后一列右边多出0.5px边框，则合计将多出1px宽度，即721px。