是否在不使用background-color的情况下将背景色添加到HTML表格单元格? [英] Add background color to an HTML table cell without using background-color?

问题描述

除了background-color样式属性外，是否有其他方法可以向表单元格添加(背景)颜色?我有带有以编程方式生成的文本内容和背景颜色的表格，这些表格可能会自行更新.我想暂时突出显示某些单元格(例如移动的光标)，最好是不触摸现有代码或干扰背景颜色样式.

Is there a way to add (background) color to a table cell other than the background-color style attribute? I have tables with programmatically generated textual content and background colors, which may update on their own. I'd like to temporarily highlight certain cells (think of a moving cursor), ideally without touching the existing code or interfere with the background-color styling.

可能我可以计算一些叠加DIV，但是我更喜欢可以在单元格本身上尝试的任何东西.

Possibly I could calculate some overlay DIVs, but I'd prefer anything I could try on the cells themselves.

推荐答案

您可以使用背景图片和渐变进行此操作:

You can do this with background-image and gradient:

td {
  padding: 20px;
  background-color: grey;
}


/* your code */
td:hover {
  background-image:linear-gradient(red,red);
}
/**/

<table>
  <tr>
    <td>cell</td>
    <td style="background-color:#ddd!important">cell</td>
  </tr>
  <tr>
    <td style="background-color:#f3f3f3">cell</td>
    <td>cell</td>
  </tr>
</table>

伪元素也可以完成这项工作:

A pseudo element can also do the job:

td {
  padding: 20px;
  background-color: grey;
}


/* your code */
td {
  position:relative;
  z-index:0;
} 
td:hover::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:red;
}
/**/

<table>
  <tr>
    <td>cell</td>
    <td style="background-color:#ddd!important">cell</td>
  </tr>
  <tr>
    <td style="background-color:#f3f3f3">cell</td>
    <td>cell</td>
  </tr>
</table>

这篇关于是否在不使用background-color的情况下将背景色添加到HTML表格单元格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！