Question

我正在整理一个包含6列的表格，我正在尝试查看是否可以将1个连续渐变应用于第1列。我知道我可以选择:first-child或:first-of-type或:nth-child(1)的第一列，但使用任何其他列会将渐变应用于该单元格，从而对列产生涟漪效应。有没有办法选择WHOLE列，并应用一个流动的渐变？

这是我的jsFiddle

我只包含2列。 1个渐变列和另一个虚拟列，用于显示其他列不受影响的方式。

Answer 1

这是 Working Fiddle

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

如果您使用标签<col/>，您可以从那里绘制背景，因此，每个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>

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

2 个答案: