CSS：table单实线边框的实现方案与浏览器兼容性验证

摘要
本文主要探讨table单实线边框的几种实现方案，以及各个方案的浏览器兼容性验证（Chrome、Edge、Firefox、IE）。

引子

项目上希望业务表单在填写时，展现形式可以做成该表单实际打印出来的样子，而不是Element UI等前端框架所提供的form样式。

在使用table做表单时，Chrome出现了表格边框粗细不一的情况（IE下表现正常），由此引出了本文的课题。

问题溯源

当前table是通过border-collapse: collapse属性，来设置边框合并为单一边框的。

在上网查阅资料时，看到这样一种说法：border-collapse: collapse在与单元格合并（colspan/rowspan）同时使用时，就会造成此问题。但经过实际的测试，即使没有单元格合并，Chrome依旧会出现边框粗细不一的现象。

Chrome开发团队对此错误报告有如下回复：

It's a known (old) issue in our table code. Collapsing borders are determined based on adjacent cells and our code doesn't deal correctly with spanning cells (we only consider the cell adjoining the first row / column in a row / column span). On top of that, our border granularity is determined by the cell's span.

To fix this bug, we would need to overhaul our collapsing border code, which is a big undertaking.

翻译如下：

这是table代码的一个老问题了。合并边框是基于相邻单元格来确定的，我们的代码不能正确地处理跨度较大的单元格（目前我们只考虑了与第一行/列相邻的跨度仅为1的单元格）。最重要的是，我们的边框粒度是由单元格的跨度决定的。

想要修复这个bug，我们需要彻底地检查合并边框的相关代码，这是一项十分艰巨的任务。

既然Chrome没有修复这个问题，我们只能寻求其他单实线边框的实现方案了。

单实线边框的实现方案对比

包括Chrome上出现问题（还能容忍）的方案在内，本文一共会介绍3.5个实现单实线边框的方案（其中0.5代表着有一种方案效果实在不能接受，将作为反面案例做相关的说明）。

每一种方案将会在4种主流浏览器上做测试，测试所用浏览器的类型及版本如下：

方案1

• table设置为边框合并模式（border-collapse: collapse）
• 单元格设置全边框

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid #868686;
}

此方案从语义、逻辑的角度上看是最为合理的，可惜的是，在Chrome和Edge上均会出现边框粗细不一的问题（在IE与Firefox下没有问题）。

方案2（推荐）

• table在默认的边框分离模式（border-collapse: separate）下，将边框间距设置为0
• 所有单元格，添加且仅添加右边框与下边框
• table添加左边框与上边框，以此来补齐单元格所缺失的边框

table {
    border-collapse: separate; /* default */
    border-spacing: 0; 
    border-top: 1px solid #868686; 
    border-left: 1px solid #868686;
}
th, td {
    border-right: 1px solid #868686; 
    border-bottom: 1px solid #868686;
}

此方案的核心思想就是任何位置均仅绘制单边框，确保不存在合并边框的情况。虽然逻辑上没有那么直接，但可以实实在在的解决问题，在Chrome、Edge、IE和Firefox下，均能完美运行。

方案3

• table在默认的边框分离模式（border-collapse: separate）下，将边框间距设置为1px
• 不添加实际的边框，给table与单元格设置不同的背景色，通过背景色的差异形成边框的效果

table {
    border-collapse: separate; /* default */
    border-spacing: 1px;
    background-color: #868686; 
}
th, td {
    background-color: #ffffff;
}

此方案有些剑走偏锋的味道，想要通过给单元格之间留出1px的间距并设置背景色，来形成伪边框。从思路上看感觉是没有太大的问题，但实际测试情况不尽人意，浏览器的兼容性与方案1刚好相反，在IE和Firefox上会出现边框粗细不一的问题，而Chrome和Edge没有问题。

方案3.5（这是一个反面示例！）

• table在默认的边框分离模式（border-collapse: separate）下，将边框间距设置为0
• table与单元格均设置全边框

table {
    border-collapse: separate; /* default */
    border-spacing: 0; 
    border: 1px solid #868686;
}
th, td {
    border: 1px solid #868686;
}

此方案考虑的是，不做边框合并的操作，相邻的两个边框因为没有设置边距，而看起来像是一个加粗的单一边框。且不说加粗显示的体验不是很好，此方案最大的硬伤在于，table在不同的宽度设置下，在各种浏览器上都有可能出现table边框与单元格边框出现间距的问题（使用浏览器的放大功能，这个问题十分容易复现）。

总结

上述3个实现table单实线边框的可用方案，在不同浏览器下的兼容性表现总结如下：

综上，推荐使用方案2。在具备一定容忍度的情况下，方案1与方案3也是可用的。