如何为两列 <td> 添加单一渐变颜色？

Question

我有两个 table 列数据 <td>，一个是日期，另一个是时间。现在我想添加一个渐变颜色，它从日期开始到时间结束，如下图所示。我正在使用 Bootstrap 3.3.5、Javascript、Jquery。

是否可以添加渐变颜色或需要创建包含数据和时间的单列？

有什么建议吗？？？？

参考图片

table, th, td {
  border: 1px solid black;
}
.date {
  -webkit-column-width: 100px; /* Chrome, Safari, Opera */
  -moz-column-width: 100px; /* Firefox */
  column-width: 100px;
  background-image: linear-gradient(90deg, red, yellow);
}
.time {
  -webkit-column-width: 100px; /* Chrome, Safari, Opera */
  -moz-column-width: 100px; /* Firefox */
  column-width: 100px;
  background-image: linear-gradient(90deg, red, yellow);
}
table

<table>
    <tr>
    <th>Monthly Savings</th>
    <th>Date</th>
    <th>Time</th>
    <th>Paper</th>
    <th>Pen</th>
  </tr>
  <tr>
    <td>January</td>
    <td class="date">21/1/2019</td>
    <td class="time">10:13</td>
    <td>white</td>
    <td>Black</td>
  </tr>
  <tr>
    <td>February</td>
    <td class="date">22/2/2019</td>
    <td class="time">10:23</td>
    <td>Black</td>
    <td>white</td>
  </tr>
  <tr>
    <td>March</td>
    <td class="date">3/3/2019</td>
    <td class="time">3:23</td>
    <td>blue</td>
    <td>red</td>
  </tr>
</table>

Answer 1

您可以分段应用渐变

.a {
  background-image: linear-gradient( to right, red 80%, white);
  border-right: 1px solid green;
  color: yellow;
}

.b {
  background-image: linear-gradient( to right, red 80%, white);
  border-left: 1px solid red;
  color: yellow;
}

<table>
  <tr>
    <td class="a">Date</td>
    <td class="b">Time</td>
  </tr>
</table>

table, th, td {
  border: 1px solid black;
  color:red
}
.date {
  -webkit-column-width: 100px; /* Chrome, Safari, Opera */
  -moz-column-width: 100px; /* Firefox */
  column-width: 100px;
  background-image: linear-gradient(90deg, black, gray);
}
.time {
  -webkit-column-width: 100px; /* Chrome, Safari, Opera */
  -moz-column-width: 100px; /* Firefox */
  column-width: 100px;
  background-image: linear-gradient(90deg, gray, white);
}

<!DOCTYPE html>
  <html>
  <head>
 
 </head>
 <body>

 <table>
   <tr>
  <th>Monthly Savings</th>
  <th>Date</th>
  <th>Time</th>
  <th>Paper</th>
  <th>Pen</th>
   </tr>
   <tr>
  <td>January</td>
  <td class="date">21/1/2019</td>
  <td class="time">10:13</td>
   <td>white</td>
   <td>Black</td>
   </tr>
   <tr>
  <td>February</td>
  <td class="date">22/2/2019</td>
   <td class="time">10:23</td>
  <td>Black</td>
  <td>white</td>
   
   </tr>
  <tr>
  <td>March</td>
  <td class="date">3/3/2019</td>
   <td class="time">3:23</td>
  <td>blue</td>
  <td>red</td>
   
   </tr>
 </table>

 </body>
 </html>

Answer 2

由于您正在为您的列设置一个固定的，您可以简单地调整 background-size 以具有两列的大小并调整 background-position。为了更准确，您还需要考虑 border-spacing 和边框（在您的情况下，边框间距为 2px，边框总共有 4px）

table, th, td {
  border: 1px solid black;
}
.date {
  -webkit-column-width: 100px; /* Chrome, Safari, Opera */
  -moz-column-width: 100px; /* Firefox */
  column-width: 100px;
  background: linear-gradient(90deg, red, yellow) left/206px 100%;
}
.time {
  -webkit-column-width: 100px; /* Chrome, Safari, Opera */
  -moz-column-width: 100px; /* Firefox */
  column-width: 100px;
  background: linear-gradient(90deg, red, yellow) right/206px 100%;
}

<table>
    <tr>
    <th>Monthly Savings</th>
    <th>Date</th>
    <th>Time</th>
    <th>Paper</th>
    <th>Pen</th>
  </tr>
  <tr>
    <td>January</td>
    <td class="date">21/1/2019</td>
    <td class="time">10:13</td>
    <td>white</td>
    <td>Black</td>
  </tr>
  <tr>
    <td>February</td>
    <td class="date">22/2/2019</td>
    <td class="time">10:23</td>
    <td>Black</td>
    <td>white</td>
  </tr>
  <tr>
    <td>March</td>
    <td class="date">3/3/2019</td>
    <td class="time">3:23</td>
    <td>blue</td>
    <td>red</td>
  </tr>
</table>

如果您更改列的宽度，它也会起作用，只需确保遵守总和即可：

table, th, td {
  border: 1px solid black;
}
.date {
  -webkit-column-width: 50px; /* Chrome, Safari, Opera */
  -moz-column-width: 50px; /* Firefox */
  column-width: 50px;
  background: linear-gradient(90deg, red, yellow) left/126px 100%;
}
.time {
  -webkit-column-width: 70px; /* Chrome, Safari, Opera */
  -moz-column-width: 70px; /* Firefox */
  column-width: 70px;
  background: linear-gradient(90deg, red, yellow) right/126px 100%;
}

<table>
    <tr>
    <th>Monthly Savings</th>
    <th>Date</th>
    <th>Time</th>
    <th>Paper</th>
    <th>Pen</th>
  </tr>
  <tr>
    <td>January</td>
    <td class="date">21/1/2019</td>
    <td class="time">10:13</td>
    <td>white</td>
    <td>Black</td>
  </tr>
  <tr>
    <td>February</td>
    <td class="date">22/2/2019</td>
    <td class="time">10:23</td>
    <td>Black</td>
    <td>white</td>
  </tr>
  <tr>
    <td>March</td>
    <td class="date">3/3/2019</td>
    <td class="time">3:23</td>
    <td>blue</td>
    <td>red</td>
  </tr>
</table>

您可以轻松更改任何颜色并根据需要调整色标：

table, th, td {
  border: 1px solid black;
}
.date {
  -webkit-column-width: 50px; /* Chrome, Safari, Opera */
  -moz-column-width: 50px; /* Firefox */
  column-width: 50px;
  background: linear-gradient(90deg, red 10%, green 20%,blue 50%,pink) left/126px 100%;
}
.time {
  -webkit-column-width: 70px; /* Chrome, Safari, Opera */
  -moz-column-width: 70px; /* Firefox */
  column-width: 70px;
  background: linear-gradient(90deg, red 10%, green 20%,blue 50%,pink) right/126px 100%;
}

<table>
    <tr>
    <th>Monthly Savings</th>
    <th>Date</th>
    <th>Time</th>
    <th>Paper</th>
    <th>Pen</th>
  </tr>
  <tr>
    <td>January</td>
    <td class="date">21/1/2019</td>
    <td class="time">10:13</td>
    <td>white</td>
    <td>Black</td>
  </tr>
  <tr>
    <td>February</td>
    <td class="date">22/2/2019</td>
    <td class="time">10:23</td>
    <td>Black</td>
    <td>white</td>
  </tr>
  <tr>
    <td>March</td>
    <td class="date">3/3/2019</td>
    <td class="time">3:23</td>
    <td>blue</td>
    <td>red</td>
  </tr>
</table>

如何为两列 <td> 添加单一渐变颜色？

How to add single gradient color for two column <td>?

javascript

css

linear-gradients

multiple-columns

twitter-bootstrap