有没有办法将单个渐变应用于一个 table 列？

Question

我正在组合一个包含 6 列的 table，我想看看是否可以将 1 个连续渐变应用于第 1 列。我知道我可以使用 :first-child 或 :first-of-type 或 :nth-child(1) select 第一列，但使用任何其他这些都会将渐变应用于该单元格，从而引起涟漪对柱子的影响。有没有办法 select 整列，并应用一个单一的流动梯度？

这是我的jsFiddle

我只包括了 2 列。 1 列用于渐变，1 列用于显示其他列如何不受影响。

Answer 1

这是一个Working Fiddle

想法是将渐变设置为 Table，然后将第一列背景设为透明，将第二列背景设为白色。

table#compare {
  border-spacing: 0px;
  margin-bottom: 25px;
}

table#compare .features {
  background-color: transparent;
  color: white;
  text-align: right;
  padding: 10px 15px 10px;
  width: 200px;
}

table#compare tr:nth-child(1) .features {
  border-radius: 4px 4px 0px 0px;
}

table#compare tr td:nth-child(2){
  background-color:white;
}

.box {
  height: 100px;
  width: 100px;
}

.dark-blue-grad, #compare {
  background-image: -webkit-linear-gradient(#4897e4, #2e6ca8);
  background-image: -o-linear-gradient(#4897e4, #2e6ca8);
  background-image: -moz-linear-gradient(#4897e4, #2e6ca8);
  background-image: linear-gradient(#4897e4, #2e6ca8);
  background-image: #4897e4;
}

<table id="compare">
<tr>
  <td class="features">Feature #1</td>
  <td>Other column</td>
</tr>
<tr>
  <td class="features">Feature #1</td>
   <td>Other column</td>
</tr>
<tr>
  <td class="features">Feature #1</td>
   <td>Other column</td>
</tr>
<tr>
  <td class="features">Feature #1</td>
   <td>Other column</td>
</tr>
<tr>
  <td class="features">Feature #1</td>
   <td>Other column</td>
</tr>
<tr>
  <td class="features">Feature #1</td>
   <td>Other column</td>
</tr>
<tr>
  <td class="features">Feature #1</td>
   <td>Other column</td>
</tr>
<tr>
  <td class="features">Feature #1</td>
   <td>Other column</td>
</tr>
</table>

<div class="dark-blue-grad box">

</div>

Answer 2

如果您使用标签 <col/>，您可以从那里绘制背景，因此，每个列都有不同的背景，...只要它没有被 tr 或 `td/th背景。 https://jsfiddle.net/0cxn599p/5/

https://www.w3.org/wiki/HTML/Elements/colgroup

https://www.w3.org/wiki/HTML/Elements/col

table#compare {
  border-spacing: 0px;
  margin-bottom: 25px;
  background-color: #2e6ca8;
}
table#compare .features {
  color: white;
  text-align: right;
  padding: 10px 15px 10px;
  width: 200px;
}
/* rgba colors can be used over btable background and col background */
tr:nth-child(odd) {/* DEMO */
  background: rgba(0, 0, 0, 0.1);
}
tr:nth-child(even) :first-child {/* DEMO */
  background: rgba(255,255,255, 0.1);
}
.dark-blue-grad {
  min-width: 10em;
  /* this works too */
  background-image: -webkit-linear-gradient(#4897e4, #2e6ca8);
  background-image: -o-linear-gradient(#4897e4, #2e6ca8);
  background-image: -moz-linear-gradient(#4897e4, #2e6ca8);
  background-image: linear-gradient(#4897e4, #2e6ca8);
  background-color: #4897e4;
}

<table id="compare">
  <colgroup>
    <col/>
    <col class="dark-blue-grad" />
    <col/>
  </colgroup>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
</table>

有没有办法将单个渐变应用于一个 table 列？

Is there a way to apply a single gradient to just one table Column?

css

gradient