表格单元格的多色边框

Question

对于某些表格单元格，我希望有一个多色的上边框或下边框。

基于如何创建多色边框与css和css-多色边框，我能够创建多色边框。

问题是，我想将其组合为一个表格单元格，其中一些单元格具有普通边框，而另一些单元格具有多色边框。

下面的代码设置单元格的多色，但只要我想为“普通”单元格添加黑色边框，它就会覆盖多色边框（请参见代码笔）

<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;}

能做些什么才能拥有

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

Answer 1

因为普通单元格和多色单元格都使用相同的“边框”属性来实现边框外观，所以其中一个必须覆盖另一个。如果多色单元格需要两个边框，可以将一个边框转移到另一个元素。由于有一个需求（无需使用额外的标记），我们可以使用psuedo元素来承载多色边框。因此，所有单元格将具有薄的黑色边框，多色单元格将具有额外的厚多色底边框。

css prettyprint-override">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>