CODEWITHSUNDEEP
htmlcss
oshirowanen
oshirowanen

Reputation: 15925

TR level styling

I have a table and I want to style at tr level. This does not work on IE7 if I apply the style directly to the tr.

What's the best way to go about styling the table so I get a line across all rows but have no line at the very top or at the very bottom.

So basically, the table should look something like this

col1 col2 col3
--------------
col1 col2 col3
--------------
col1 col2 col3
--------------
col1 col2 col3

Upvotes: 1

Views: 101

Answers (5)

Patricia
Patricia

Reputation: 7802

you can use the last-child selector:

have a look at this fiddle:

http://jsfiddle.net/SGfQy/

EDIT: can you change the html of your table, you could put your first row in the thead, and the rest of your rows in the tbody, and then use 

table tbody tr td{
     border-top:1px solid red;   
}

updated fiddle: http://jsfiddle.net/SGfQy/1/

Upvotes: 0

Jon
Jon

Reputation: 437454

You can do this without the :last-child selector, in a way that is also compatible with IE7. And of course without JavaScript:

table tr + tr td {
    border-top: 1px black solid;
}

Actually you are using the top border to draw a line, taking advantage of the fact that the tr + tr selector will match all rows except the first one.

See it in action.

Upvotes: 3

monsieur_h
monsieur_h

Reputation: 1380

Use CSS2 selectors:

table#mytable tr{
    border-bottom:1px solid black;
}
table#mytable tr:last-child{
    border-bottom:none;
}

Upvotes: 1

ysrb
ysrb

Reputation: 6740

Try:

<tr>
<td colspan="3"><hr/></td></tr>

Upvotes: 0

Treborbob
Treborbob

Reputation: 1221

To get a border on the bottom of each row:

table tr td {
border-bottom: 1px solid #000;
}

Then you would need to use some javascript to change the style of the last one, or use css which is probably not supported in IE6/7

table tr:last-child td {
border-bottom: none;
}

example: http://jsbin.com/ezolur

Upvotes: 1

Related Questions