为何将border-style从hidden覆盖为solid后表格边框仍不显示？

为什么边框不显示？ #

这是因为你给表格设置了border-collapse: collapse，同时给所有<td>加了border-style: hidden。在边框合并模式下，hidden是特殊样式——它会直接消除单元格对应位置的整个边框区域，哪怕你用!important强制改border-right-style也没用，因为hidden在合并边框规则里的优先级比solid高，会彻底覆盖这个位置的边框。

两种解决思路 #

思路1：换掉全局的hidden样式 #

别给所有td都加border-style: hidden，改成border: none就不会影响其他单元格的边框显示了：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#timeline {
  border-collapse: collapse;
  width: 100%;
}

#timeline td {
  /* 用border: none替代border-style: hidden */
  border: none;
  padding: 10px;
}

#timeline td.tl_date {
  padding-right: 10px;
  border-right: 1px solid black;
}

思路2：修改表格的边框合并规则 #

把border-collapse: collapse改成border-collapse: separate，再加上border-spacing: 0保证单元格之间没有空隙：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#timeline {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

#timeline td {
  border-style: hidden;
  padding: 10px;
}

#timeline td.tl_date {
  padding-right: 10px;
  border-right: 1px solid black;
}

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