CODEWITHSUNDEEP
cssgradient
Shirley Dodson
Shirley Dodson

Reputation: 339

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

I'm putting together a table with 6 columns, and I'm trying to see if I can apply 1 continuous gradient to the 1st column. I know that I can select the first column with either :first-child or :first-of-type or :nth-child(1), but using any other these would apply the gradient to just that cell, causing a ripple effect on the column. Is there a way to select the WHOLE column, and apply one single, flowing gradient?

Here is my jsFiddle

I only included 2 columns. 1 Column for the gradient, and 1 other dummy column to show how other columns wouldn't be affected.

Upvotes: 0

Views: 1889

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

If you use the tag <col/> you may draw backgrounds from there and so, different backgrounds for each col, ... as long as it is not hidden by a tr or `td/th background. https://jsfiddle.net/0cxn599p/5/

https://www.w3.org/wiki/HTML/Elements/colgroup

https://www.w3.org/wiki/HTML/Elements/col

table#compare {
  border-spacing: 0px;
  margin-bottom: 25px;
  background-color: #2e6ca8;
}
table#compare .features {
  color: white;
  text-align: right;
  padding: 10px 15px 10px;
  width: 200px;
}
/* rgba colors can be used over btable background and col background */
tr:nth-child(odd) {/* DEMO */
  background: rgba(0, 0, 0, 0.1);
}
tr:nth-child(even) :first-child {/* DEMO */
  background: rgba(255,255,255, 0.1);
}
.dark-blue-grad {
  min-width: 10em;
  /* this works too */
  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-color: #4897e4;
}
<table id="compare">
  <colgroup>
    <col/>
    <col class="dark-blue-grad" />
    <col/>
  </colgroup>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
  <tr>
    <td class="features">Feature #1</td>
    <td>Other column</td>
    <td class="features">Feature #2</td>
  </tr>
</table>

Upvotes: 1

Rajshekar Reddy
Rajshekar Reddy

Reputation: 19007

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>

Upvotes: 2

Related Questions