Блог

Главная - Вопросы по программированию - Как добавить один градиентный цвет для двух столбцов ?

Как добавить один градиентный цвет для двух столбцов ?

#javascript #css #twitter-bootstrap #multiple-columns #linear-gradients

#javascript #css #twitter-bootstrap #несколько столбцов #линейные градиенты

Вопрос:

У меня есть данные двух столбцов таблицы <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>

Комментарии:

1. Сначала опубликуйте некоторый код с примером того, что вы пробовали, чтобы мы могли помочь его улучшить. Во-вторых, возможно, вы можете добавить фоновый градиентный цвет к <tr> строке, содержащей <td> столбцы.

2. @Shidersz Спасибо за ваш ответ. Согласно вашей идее, добавление градиента в <tr> здесь не подходит, потому что в таблице слишком много данных.

Ответ №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>

Комментарии:

1. Хорошая работа. Как насчет цвета, начинающегося с красного и заканчивающегося белым. Возможно ли это для процента? например: Теперь мы рассматриваем столбец данных в виде одной таблицы, и превышение результата должно составлять 80%. Теперь красный цвет полностью покрыл столбец даты, а затем на 80% — столбец времени. возможно ли это?

Ответ №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>