如何为表格中的一列设置从上到下的蓝色渐变背景？

要让表格某一列拥有从上到下的蓝色渐变背景且覆盖10行，可按以下方案实现：

核心思路 #

默认每个表格单元格是独立元素，直接给单元格加渐变会导致每个单元格都有独立渐变，无法形成整列连贯效果。我们可以把渐变背景应用在表格容器上，再通过背景裁剪和单元格背景遮挡，让渐变只显示在目标列区域内。

完整代码示例 #

HTML #

<table>
  <!-- 10行示例内容 -->
  <tr> <td>普通列内容1</td> <td class="gradient_column">渐变列内容1</td> <td>普通列内容1</td> </tr>
  <tr> <td>普通列内容2</td> <td class="gradient_column">渐变列内容2</td> <td>普通列内容2</td> </tr>
  <tr> <td>普通列内容3</td> <td class="gradient_column">渐变列内容3</td> <td>普通列内容3</td> </tr>
  <tr> <td>普通列内容4</td> <td class="gradient_column">渐变列内容4</td> <td>普通列内容4</td> </tr>
  <tr> <td>普通列内容5</td> <td class="gradient_column">渐变列内容5</td> <td>普通列内容5</td> </tr>
  <tr> <td>普通列内容6</td> <td class="gradient_column">渐变列内容6</td> <td>普通列内容6</td> </tr>
  <tr> <td>普通列内容7</td> <td class="gradient_column">渐变列内容7</td> <td>普通列内容7</td> </tr>
  <tr> <td>普通列内容8</td> <td class="gradient_column">渐变列内容8</td> <td>普通列内容8</td> </tr>
  <tr> <td>普通列内容9</td> <td class="gradient_column">渐变列内容9</td> <td>普通列内容9</td> </tr>
  <tr> <td>普通列内容10</td> <td class="gradient_column">渐变列内容10</td> <td>普通列内容10</td> </tr>
</table>

CSS #

table {
  /* 设置垂直方向的蓝色渐变 */
  background: linear-gradient(to bottom, #e6f2ff, #0066cc);
  border-collapse: collapse;
  width: 100%;
}

td {
  border: 1px solid #ddd;
  padding: 8px;
  /* 普通列用白色背景遮挡表格渐变 */
  background: #fff;
}

/* 目标列设置透明背景，让表格的渐变透出来 */
.gradient_column {
  background: transparent;
  /* 可根据需求固定列宽 */
  /* width: 220px; */
}

效果说明 #

1. 表格容器的渐变贯穿整个表格高度，保证了列渐变的连贯性
2. 普通列的白色背景会遮挡表格的渐变，只让目标列显示出渐变效果
3. 修改linear-gradient内的颜色值，即可调整渐变的蓝色深浅过渡

内容的提问来源于stack exchange，提问作者user718229