表格单元格的多色边框答案

【问题标题】：Multi color border for table Cell表格单元格的多色边框
【发布时间】：2021-05-03 04:04:07
【问题描述】：

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

基于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。

问题

可以做什么

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

【问题讨论】：

标签： html css user-interface

【解决方案1】：

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

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>

【讨论】：