表格单元格的多色边框

Question

对于某些表格单元格，我想要一个多色的顶部边框或底部边框。

基于 how-to-create-multi-color-border-with-css 和 css-multi-color-border，我能够创建多色边框。

问题是我想将它组合到表格单元格 td 中，其中一些单元格具有正常边框，而其他单元格具有多色边框。

下面的代码为一个单元格设置了多色，但是一旦我想为“正常”单元格添加黑色边框，它就会覆盖多色边框（请参阅codepen）

<style>

.works  .gap-from {
  text-align:center;
  border-bottom: 4px solid;
  border-image:  linear-gradient(to right, lightgrey 40%, yellow 40%) 1;
}
</style>


<table class="works">
  <tr><td>no color border</td><td class="gap-from">without span</td></tr>
  <tr><td><span class="gap-from">with span</span></td></tr>  
</table>

这似乎使它部分工作，必须为表格设置背景颜色。但这会导致粗边界线。

table.works {background-color: black;}
table.works colgroup {background-color: white;}

仅供参考：purpose is to visualize date overlaps and date gaps。

问题

可以做什么

• 每个单元格的正常细边框
• 某些单元格的多色边框
• 不使用额外的标记（额外的跨度）？

Answer 1

由于普通单元格和多色单元格使用相同的 border 属性来实现边框外观，因此必须覆盖另一个。如果多色单元格需要 2 个边框，则可以将一个边框转移到另一个元素。由于有需求（不使用额外的标记），我们可以利用伪元素来承载多色边框。因此，所有单元格都将有细的黑色边框，多色单元格将有一个额外的粗多色底部边框。

table {
  border-collapse: collapse;
}

td {
  position: relative;
  /* normal thin borders for every cell */
  border: 1px solid black;
}

/* let the psuedo element host the multi-color border, so it wont be overritten by normal td */
td.multiColor:after {
  border-bottom: 4px solid;
  border-image: linear-gradient(to right, lightgrey 40%, yellow 40%) 1;
  /* psuedo element positioning */
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  /* tell the borowser its border width is included with its element size, so it will not overlap with td border */
  box-sizing: border-box;
}

<table>
  <tr>
    <td>normal cell</td>
    <td class='multiColor'>multi color</td>
  </tr>
  <tr>
    <td class="multiColor">multi color</td>
    <td>normal cell</td>
  </tr>
</table>