设置border-collapse:collapse后表格行边框宽度不一致问题

设置border-collapse:collapse后，表格边框出现异常——第二行的底部边框视觉上比其他行更粗，尝试调整border样式仍未找到问题根源。

相关代码如下：

CSS代码 #

table {
    background-color: burlywood;
    height: 200px;
    width: 600px;
    border: 1px solid black;
    text-align: center;
    border-collapse: collapse;
}

table > tbody > tr > td {
    border: 1px solid black;
}

HTML代码 #

<table>
    <tbody>
        <tr>
            <td>cell 1</td>
            <td>cell 2</td>
            <td>cell 3</td>
        </tr>
        <tr>
            <td>cell 4</td>
            <td>cell 5</td>
            <td>cell 6</td>
        </tr>
        <tr>
            <td>cell 7</td>
            <td>cell 8</td>
            <td>cell 9</td>
        </tr>
        <tr>
            <td>cell 10</td>
            <td>cell 11</td>
            <td>cell 12</td>
        </tr>
    </tbody>
</table>

目标是让所有边框宽度保持一致。

这个问题多是浏览器渲染时，表格自身边框与单元格边框合并产生的视觉叠加问题，以下几种方法可解决：

方法1：移除表格边框，通过单元格边框构建完整轮廓 #

直接去掉表格的border属性，通过控制首尾行、首尾列单元格的边框实现表格外层边框，彻底避免边框叠加：

table {
    background-color: burlywood;
    height: 200px;
    width: 600px;
    border: none; /* 移除表格自带边框 */
    text-align: center;
    border-collapse: collapse;
}

table > tbody > tr > td {
    border: 1px solid black;
}

/* 添加上层边框 */
table > tbody > tr:first-child > td {
    border-top: 1px solid black;
}
/* 添加下层边框 */
table > tbody > tr:last-child > td {
    border-bottom: 1px solid black;
}
/* 添加左侧边框 */
table > tbody > tr > td:first-child {
    border-left: 1px solid black;
}
/* 添加右侧边框 */
table > tbody > tr > td:last-child {
    border-right: 1px solid black;
}

方法2：统一边框规则，避免渲染冲突 #

如果需要保留表格边框，确保表格和单元格的边框样式完全一致，添加border-style: solid强制统一渲染规则，可解决部分浏览器的合并冲突：

table {
    background-color: burlywood;
    height: 200px;
    width: 600px;
    border: 1px solid black;
    text-align: center;
    border-collapse: collapse;
    border-style: solid;
}

table > tbody > tr > td {
    border: 1px solid black;
    border-style: solid;
}

方法3：修复亚像素渲染误差 #

若为浏览器亚像素渲染导致的视觉错觉，可尝试调整表格高度为偶数，或给表格添加硬件加速属性：

table {
    /* 其他属性不变 */
    transform: translateZ(0);
}

内容的提问来源于stack exchange，提问作者Laa Laa