Applying a Single Background Gradient to a Table Row

Applying a single background gradient to a table row

set background-attachment:fixed; on thead and it will work fine

http://jsfiddle.net/cGV47/64/

How do I apply the background gradient color map 'RdYlGn' to some table rows, and it's reverse 'RdYlGn_r' to other rows in the same table?

Had to chain the background gradient method for each row and target as subset:

import pandas as pd

data = pd.read_csv('/Users/broderickbonelli/Desktop/test.csv', index_col=" ", na_values='-')

data = data.style.background_gradient(axis=1, cmap='RdYlGn', subset=(data.index[0], data.columns)).background_gradient(axis=1, cmap='RdYlGn', subset=(data.index[1], data.columns)).background_gradient(axis=1, cmap='RdYlGn_r', subset=(data.index[2], data.columns)).background_gradient(axis=1, cmap='RdYlGn_r', subset=(data.index[3], data.columns)).background_gradient(axis=1, cmap='RdYlGn', subset=(data.index[4], data.columns)).background_gradient(axis=1, cmap='RdYlGn', subset=(data.index[5], data.columns)).background_gradient(axis=1, cmap='RdYlGn', subset=(data.index[6], data.columns)).background_gradient(axis=1, cmap='RdYlGn', subset=(data.index[7], data.columns)).background_gradient(axis=1, cmap='RdYlGn', subset=(data.index[8], data.columns)).set_precision(2)
display(data)

Is it possible to set one linear gradient background on several table rows?

I don't think this is possible, I have also same requirement in a project.

what I have done : use a css trick like this

.bg1 {
  background: linear-gradient(to bottom, #FFF 0%, #f7f6f6 100%) repeat scroll 0% 0% transparent;
}
.bg2 {
  background: linear-gradient(to bottom, #f7f6f6 0%, #f4f4f4 100%) repeat scroll 0% 0% transparent;
}
.bg3 {
  background: linear-gradient(to bottom, #f4f4f4 0%, #EEE 100%) repeat scroll 0% 0% transparent;
}

Updated Jsfiddle

This is not a proper answer but may be works for you.

Gradient Background on a table row doesn't work in IE

After many fiddling, I came to this result, hope it helps (note the different gradient CSS rules; you need to play around with the values according to your preferences; also: only tested in IE):

.gradient {

 background-image: linear-gradient(210deg, #FFF133 38%, #16D611 46%, #00A3EF 59%); 

    margin: 0;

    background-repeat: no-repeat;

    background-attachment: fixed;

}

.gradientRow {

 background-image: linear-gradient(210deg, #FFF133 51%, #16D611 61%, #00A3EF 67%); 

    margin: 0;

    background-repeat: no-repeat;

    background-attachment: fixed;

}

.solid {

  background-color: aqua;

}

.box {

  width:200px;

 height:200px;

}

table, tr, td, th {

  border: 2px solid black

}

<div class="gradient box"></div>

<table>

<thead>

  <tr>

    <th style="width:20%;">Column 1</th>

    <th style="width:50%;">Column 2</th>

    <th style="width:30%;">Column 3</th>

  </tr>

</thead>

<tbody>

  <tr class="solid"><td> </td><td> </td><td> </td></tr>

  <tr><td> </td><td> </td><td> </td></tr>

  <tr class="gradient"><td> </td><td> </td><td> </td></tr>

  <tr><td> </td><td> </td><td> </td></tr>

  <tr><td> </td><td> </td><td> </td></tr>

</tbody>

</table>

Is there a way to apply a single gradient to just one table Column?

Here is a Working Fiddle

The idea is to set the gradient to the Table and then make the first column background transparent and the 2nd column background White.

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;

}

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

Table tr background gradient on hover using CSS

Maybe not the best solution, but maybe good enough for you, and it's working in Chrome too. DEMO

HTML:

<div class="table-wrapper">
    <table>
        ...
    </table>
</div>

CSS:

/* To hide the overflow */
.table-wrapper{
    position: relative;
    overflow: hidden;
}

tr{
    position: relative;
}

/* Making the background with :before pseudo-element */

tr:before
{
    position: absolute;
    content: "";
    width: 100%;
    height: 20px;
    z-index: -1;
}

tr:hover:before
{
    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Standard syntax (must be last) */
}

How to add single gradient color for two column td ?

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>

---

Related Topics