表格单元格的突出显示 - html/css

Question

我在我的网站上有一个表格，我想突出显示某些单元格的角落，如在excel中。

有什么办法如何在CSS中这样做吗？

我已经在我的表上应用了引导样式和数据表扩展。

Answer 1

使用linear-gradient

td { 
 
    padding: 1em 3em; 
 
    border: 1px solid grey; 
 
    background-image: linear-gradient(225deg, red, red 10px, transparent 10px, transparent); 
 
}

<table> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

还是一个伪元素

td { 
 
    padding: 1em 3em; 
 
    border: 1px solid grey; 
 
    position: relative; 
 
} 
 

 
td::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-width: 7.5px; 
 
    border-style: solid; 
 
    border-color: red red transparent transparent; 
 
}

<table> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

Answer 2

正如@Era建议的那样，您可以使用：之前只用css在单元格内构建该三角形。 对于定位，您需要使用position: relative;制作该单元格，这会使其内部的每个绝对项目都与元素的位置相关。然后用一些边界你可以轻松地建立红色的角落。

table, tr, td{ 
 
\t border: 1px solid black; 
 
} 
 
table{ 
 
\t border-collapse: collapse; 
 
\t width: 300px; 
 
} 
 

 
td.corner{ 
 
\t position: relative; 
 
} 
 
td.corner:before{ 
 
\t content: ''; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t right: 0; 
 
\t border-left: 5px solid transparent; 
 
\t border-top: 5px solid red; 
 
}

<table> 
 
<tr> 
 
\t <td>a</td> 
 
\t <td>b</td> 
 
</tr> 
 
<tr> 
 
\t <td class="corner">c</td> 
 
\t <td>d</td> 
 
</tr> 
 
</table>