CSS Auto Numbers for Table Rows - Not First

CSS auto numbers for table rows - not first?

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).

Auto-number table rows?

The following CSS enumerates table rows (demo):

table {  counter-reset: rowNumber;}
table tr::before {  display: table-cell;  counter-increment: rowNumber;  content: counter(rowNumber) ".";  padding-right: 0.3em;  text-align: right;}

<table cellpadding="0">  <tr><td>blue</td></tr>  <tr><td>red</td></tr>  <tr><td>yellow</td></tr>  <tr><td>green</td></tr>  <tr><td>purple</td></tr>  <tr><td>orange</td></tr>  <tr><td>maroon</td></tr>  <tr><td>mauve</td></tr>  <tr><td>lavender</td></tr>  <tr><td>pink</td></tr>  <tr><td>brown</td></tr></table>

How to exclude the first and last row in a table when using CSS counter-increment

You can create a counter for the table, and increment it in every row that is not the first (:first-child) nor the last (:last-child) with a selector like this:

table#thisNet tr:not(:first-child):not(:last-child) {
  counter-increment: netLogCounter;
}

Here you can see a demo:

table#thisNet {
  counter-reset: netLogCounter 0;
}

table#thisNet tr:not(:first-child):not(:last-child) {
  counter-increment: netLogCounter;
}

table#thisNet tr:not(:first-child):not(:last-child) td:first-child::before {
  content: counter(netLogCounter); 
}

<table id="thisNet">
  <tr><td>ID</td><td>Value</td></tr>
  <tr><td></td><td>3</td></tr>
  <tr><td></td><td>2</td></tr>
  <tr><td></td><td>4</td></tr>
  <tr><td></td><td>6</td></tr>
  <tr><td>TOTAL</td><td>15</td></tr>
</table>

Auto index rows using CSS is not functioning as expected

Set the initial counter on tbody instead of table.

tbody {
  counter-reset: rowNumber;
}

tbody {  counter-reset: rowNumber;}
tbody tr {  counter-increment: rowNumber;}
tbody tr td:first-child::before {  content: counter(rowNumber);}

<table>  <thead>    <tr>      <th>#</th>      <th>User Name</th>    </tr>  </thead>  <tbody>    <tr>      <td></td>      <td>{{userFullName}}</td>    </tr>    <tr>      <td></td>      <td>{{userFullName}}</td>    </tr>  </tbody></table>

How do I number my table with each number colspanned to the first cell of each row?

UPDATED based on clarifications on comments

You need to tell the header column that it will occupy more than one column. In this case, it will be the width of 2 columns. Like this:

<th colspan="2">Player</th>

Update 2

To remove the line between the number and the first column, use CSS similar to this:

table tbody tr::before {
  display: table-cell;
  counter-increment: rowNumber;
  content: counter(rowNumber) "";
  border-right: 0;
  border-top: 1px solid white;
  border-bottom: 1px solid lightgrey;
  vertical-align: middle;
}

table tbody tr td{
  border-left: 0px;
}

See updated demo:

.table-style {
  width: 40%;
  margin: 50px auto;
  background-color: white;
  border-collapse: collapse;
  border-spacing: 1rem;  
}

.table-style thead tr th {
  border: none;
}

table tbody {
  counter-reset: rowNumber;
}

table tbody tr::before {
  display: table-cell;
  counter-increment: rowNumber;
  content: counter(rowNumber) "";
  border-right: 0;
  border-top: 1px solid white;
  border-bottom: 1px solid lightgrey;
  vertical-align: middle;
}

table tbody tr td{
  border-left: 0px;
}

.head-style {
  background-color: black;
  color: white;
  padding-bottom: 30px;
}

.body-style {
  border: solid 2px lightgrey;
  border-top: none;
}

<table class="table-style" border="1" cellpadding="10px">

  <thead class="head-style">
    <tr>
      <th colspan="2">Player</th>
      <th>PT</th>
      <th>G</th>
      <th>A</th>
      <th>HITS</th>
      <th>GP</th>
    </tr>
  </thead>
  <tbody class="body-style">
    <tr>
      <td>Player1</td>
      <td>2</td>
      <td>1</td>
      <td>1</td>
      <td>10</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Player2</td>
      <td>1</td>
      <td>1</td>
      <td>0</td>
      <td>5</td>
      <td>2</td>
    </tr>

    <tr>
      <td>Player3</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

How to display row number in HTML table in specific column?

Here is the working code for this:

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            var index = document.getElementById("myTable").rows.length;
            var new_row = '<td>'+index+'</td><td>cell 1</td><td>cell 2</td>';
            document.getElementById("myTable").insertRow(-1).innerHTML = new_row;
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
            `   <td>0</td>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>

        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

How to target multiple table rows with a single CSS rule?

This is what you have in your fiddle demo:

table tr:first-child  { background-color: red; }
table tr:nth-child(2) { background-color: red; }
table tr:nth-child(3) { background-color: red; }
table tr:nth-child(4) { background-color: red; }

So you're targeting the first four rows of the table.

To target the same rows using one line of CSS you can do:

table tr:nth-child(-1n + 4) { background-color: red; }

This calculation represents:

(-1 * 0) + 4 = 4
(-1 * 1) + 4 = 3
(-1 * 2) + 4 = 2
(-1 * 3) + 4 = 1
(-1 * 4) + 4 = 0   /* starting here, the rule is ignored */
(-1 * 5) + 4 = -1  /* negative values are ignored */
       ...
       ...
       ...

Here's the full code:

table{  background-color:blue;}
table tr:nth-child(-1n + 4){  background-color:red;};

<table>  <th>My table</th>  <tr>    <td>first row</td>  </tr>  <tr>    <td>second row</td>  </tr>  <tr>    <td>third row</td>  </tr></table>

Select table rows without table headers using css selector

That is not a valid CSS selector; you can't put combinators inside :not().

Your best bet is to put header rows (i.e. <tr> elements that contain <th> elements) inside a <thead>, leave the rest of the rows in your table's <tbody>, and simply use this:

table tbody tr {
    cursor: pointer;
}

If you can't modify your HTML, it's not possible with CSS selectors alone, especially not with your requirement of supporting IE6. Use JavaScript instead; here's an obligatory jQuery example:

$('table tbody tr:not(:has(th))').css('cursor', 'pointer');

---

Related Topics