Adding style to CSS Table

Question

I'm echoing data out of my database into a <table>, however I'm trying to add a gradient line under each output, to show in-between each <tr> output row. But I can't get the CSS right on the <tr>.

I've managed to put together the design I want on a <hr> here: http://jsfiddle.net/ghrw3k8e/.

But I want it in-between my table rows (not columns).

My PHP output data:

echo " <tr> 
<td align='center'>".$1." </td> 
<td align='center'>".$2."</td> 
<td align='center'>".$3."</td>
 </tr> ";

does this answer your question?:stackoverflow.com/questions/2597694/why-tr-not-taking-style — user786
– user786, Commented May 24, 2015 at 10:30
possible duplicate of Border around specific rows in a table? — sergdenisov
– sergdenisov, Commented May 24, 2015 at 10:52
I think this is not a duplicate question. He wants to draw a gradient border between the rows of a table. The solution here is not to use outline on each <tr> as you can not draw just the bottom or top part of that outline. Collapsing the borders should allow you to set borders on rows, but I think it's not possible to use border-image (even if prefixed) to draw a gradient border on a <tr>. You can only change the border-style value to: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit. — Danziger
– Danziger, Commented May 24, 2015 at 15:03

Danziger · Accepted Answer · 2015-05-24 16:55:31Z

1

Just use pseudo-elements. You will have to put that "border" on one <td> of each <tr>, so its width should be equal to 100 × number_of_columns % if they are all the same width:

table {
  width: 100%;
  border-collapse: collapse; 
}

td {
  position:relative;   
  width: 33.333333%;
  border: 1px solid transparent;
  text-align:center;
}

tr:not(:last-child) > td:first-child::after {
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  height: 1px;
  width:300%;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
}

<table>
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>D</td><td>E</td><td>F</td></tr>
  <tr><td>G</td><td>H</td><td>I</td></tr>
</table>

Although it may seem more logical to have it on the <tr>, it won't get positioned correctly, as you can read from the spec: http://www.w3.org/TR/CSS21/visuren.html#propdef-position

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

Here's the incorrect code. You can see that the ::after element is positioned at the very bottom of the page:

table {
  width: 100%;
  border-collapse: collapse;
}


tr{
  position:relative;    
}

td {
  width: 33.333333%;
  border: 1px solid transparent;
  text-align: center;
}


tr:not(:last-child)::after {
  content:"";
  position:absolute;
  bottom:-1px;
  left:0;
  height: 1px;
  width:300%;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(176,0,0,.8), rgba(0,0,0,0));
}

<table>
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>D</td><td>E</td><td>F</td></tr>
  <tr><td>G</td><td>H</td><td>I</td></tr>
</table>

edited May 24, 2015 at 16:55

answered May 24, 2015 at 14:03

Danziger

21.4k6 gold badges59 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shanie93 Over a year ago

Perfect, exactly what I wanted, thank you!! - The only problem I'm facing is it's expanding the width of the second '<tr>' and pushing the 6th & 7th '<tr>' to the side of the element with about 15% of the normal size

Danziger Over a year ago

Then you mean <td>, not <tr>. What width have you set the <td>s to? In my example it's 33.333333% because there are 3 of them per row. In your case it should be 100/7 = 14.285714% or you can also set that in pixels if the table has a fixed width.

Shanie93 Over a year ago

Yeah I got it now, sorry I didn't post, was distracted with the next task at hand, thanks for the reply/help though Dan!! Much appreciated.

frogatto · Accepted Answer · 2015-05-24 10:55:59Z

0

You can insert an extra row for each line.

hr.soften {
  height: 1px;
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(176, 0, 0, .8), rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(176, 0, 0, .8), rgba(0, 0, 0, 0));
  background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(176, 0, 0, .8), rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(176, 0, 0, .8), rgba(0, 0, 0, 0));
  border: 0;
}
td {
  width: 200px;
}

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>
      <hr class="soften" />
    </td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>
      <hr class="soften" />
    </td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
</table>

answered May 24, 2015 at 10:55

frogatto

29.4k13 gold badges90 silver badges137 bronze badges

2 Comments

Shanie93 Over a year ago

This is adding only a new column with the '<hr>' embedded. My output data which I want the line to show inbetween is: echo " <tr> <td align='center'>".$1." </td> <td align='center'>".$2."</td> <td align='center'>".$3."</td> </tr> ";

Danziger Over a year ago

You should use position: relative on the <td> containing the <hr> and position: absolute on the <hr> to extend it across all the columns or use the colspan attribute on the <td>. However, I think that's not entirely semantically correct.

Collectives™ on Stack Overflow

Adding style to CSS Table

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related