Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS auto numbers for table rows - not first?

Tags:

css

I have the following code which is used to apply a row count to a dynamic table -

.ftable table {
    counter-reset: rowNumber;
}

.ftable tr {
    counter-increment: rowNumber;
}

.ftable tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

Which came from (Auto-number table rows?)

Is it possible to ignore the first row (first row is my header row - which has a class of fble_htr if thats any help)

like image 345
Dancer Avatar asked Aug 11 '14 16:08

Dancer


2 Answers

Yes:

.ftable tr:not(.fble_htr) {
    counter-increment: rowNumber;
}

.ftable tr:not(.fble_htr) td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

Instead of tr:not(.fble_htr), you could also use tr:not(:first-child) or tr + tr.

As mentioned in the comments, if you can modify your HTML, another option is to move your header row into a thead element, and the rest of the rows into a tbody element, then select .ftable tbody tr instead of .ftable tr:not(.fble_htr).

like image 148
BoltClock Avatar answered Oct 21 '22 01:10

BoltClock


if you marked the table right the first row should be thead and so you can use:

.rlstable {
 counter-reset: row-num;
}
.rlstable tbody tr  {
counter-increment: row-num;
}

.rlstable tr td:first-child::before {
content: counter(row-num) ". ";
}
.rlstable tr td:first-child {
text-align: center;
}
like image 29
Rafael Avatar answered Oct 21 '22 03:10

Rafael