CSS: indenting elements between x and y

开发者_C百科Take a look at this JS Fiddle:

http://jsfiddle.net/LJLTX/3/

What I want to do is indent the content in every row between the 2nd row and last row. In this case, it would be the 3rd, 4th and 5th rows.

How can I accomplish this in CSS?

---

You can do it with JQuery:

$('.geniusPicks tr>td').slice(1,5).addClass('indent')

I added the class indent:

http://jsfiddle.net/DmcEB/1/

---

If you can rely on the visitor having a modern browser, you can use:

td {
    padding-left: 20px;     // or whatever distance you need
}
tr:nth-child(2) td,
tr:last-child td {
    padding-left: 0;
}

But that does not work in older versions of IE (I´m not even sure about IE8) so to address that you could give the first real row (not the header row) and the last row of the table a class and use:

td {
    padding-left: 20px;     // or whatever distance you need
}
.first_real_row_class td,
.last_row_class td {
    padding-left: 0;
}

---

Here is correct fiddle for that: http://jsfiddle.net/DmcEB/2/