CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapmultiple-columnslinear-gradients
jsjq-finder
jsjq-finder

Reputation: 165

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

I have Two table columns data <td>, one is date and another is time. Now I want to add a gradient color, it starts from Date and ends with time like the below image. I am using Bootstrap 3.3.5, Javascript, Jquery.

Is it possible to add gradient color or need to create a single column with Data and Time?

Any suggestion????

Refer image enter image description here

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>

Upvotes: 0

Views: 757

Answers (2)

Temani Afif
Temani Afif

Reputation: 273261

Since your are setting a fixed with to your column, you can simply adjust the background-size to have the size of the both column and adjust the background-position. To be more accurate you need to also consider the border-spacing and the border (in your case you have 2px border spacing and 4px in total for borders)

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>

It will also work if you change the width of the columns, simply make sure the sum is respected:

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>

You can easily change any color and adjust the color stop like you want:

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>

Upvotes: 1

ellipsis
ellipsis

Reputation: 12152

You can apply the gradients in parts

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

Upvotes: 3

Related Questions