Try to search your question here, if you can't find : Ask Any Question Now ?

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

HomeCategory: stackoverflowHow to add single gradient color for two column <td>?
rupesh asked 2 weeks ago

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
    	<!DOCTYPE html>
		<html>
		<head>
		<style>
		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
	</style>
	</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 Answers
Best Answer
Arben answered 2 weeks ago
Your Answer

5 + 16 =

Popular Tags

WP Facebook Auto Publish Powered By : XYZScripts.com