CSS HTML 表格单元格部分背景填充

在本文中，我们将介绍如何使用CSS和HTML来实现表格单元格的部分背景填充效果。表格是在网页开发中广泛使用的一种元素，而通过设置表格单元格的背景填充，可以提升网页的可读性和视觉效果。

阅读更多：CSS 教程

背景填充整个单元格

首先，我们将学习如何通过设置CSS样式来填充整个表格单元格的背景色。通过设置单元格的背景色，我们可以使表格更有层次感，提高内容的可读性。

我们可以使用background-color属性来设置单元格的背景色。例如，我们可以将表格的某个单元格的背景色设置为红色：

td {
  background-color: red;
}

这样做将会将整个表格单元格的背景色设置为红色。

部分背景填充

除了填充整个表格单元格，有时我们需要只填充其中某个部分的背景色。这在一些特殊的设计需求中非常有用，比如用来突出显示某些重要的信息。

要实现部分背景填充效果，我们可以使用伪元素和相对定位来创建一个覆盖在表格单元格上的背景色层。下面是一个例子：

<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
    <td class="highlight">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
  </tr>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
  </tr>
</table>

td.highlight {
  position: relative;
}

td.highlight::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 50%;
  background-color: yellow;
  z-index: -1;
}

在上面的示例中，我们添加了一个类名为highlight的表格单元格，并使用相对定位的方式创建了一个覆盖在该单元格上方的背景色层。通过设置::before伪元素的宽度为50%，我们可以实现只填充单元格的一半背景色的效果。