-1

How to add an index column to a HTML <table> using just CSS?

Before:

ITEM PRICE
Banana $2
Orange $1

After:

No. ITEM PRICE
1   Banana $2
2   Orange $1

How to add it automatically? I.e., what should I put instead of <td>1</td> that will compute the 1 automatically?

Or is the only way JavaScript? And will it look like a disaster if JavaScript this not turned on in the reader's browser?

Improve this question
4
  • 1
    Note that CSS cannot add anything to the HTML. It can alter the appearance and add the No. and the numbers visually. They may or may not be read out by screen readers. Commented Feb 14 at 7:13
  • Gee, stackoverflow.com/questions/37830238/… doesn't mention <tables> at all. Commented Feb 14 at 11:00
  • 1
    The linked question doesn't need to reference tables specifically, it's a general method for adding content to pseudo elements which is applicable in your case. Commented Feb 14 at 11:26
  • In stackoverflow.com/questions/79439415/… I made a fresh new cleaner replacement question. Commented Feb 14 at 12:47

1 Answer 1

Reset to default
1 

table {
  counter-reset: row-counter;
  border-collapse: collapse;
  width: 50%;
}

th,
td {
  border: 1px solid #ddd;
  text-align: center;
}

tbody tr {
  counter-increment: row-counter;
}

tbody tr::before {
  content: counter(row-counter);
  display: table-cell;
  border: 1px solid #ddd;
  text-align: center;
}
<table>
  <thead>
    <tr>
      <th>NO</th>
      <th>ITEM</th>
      <th>PRICE</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Banana</td>
      <td>$2</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>$1</td>
    </tr>
  </tbody>
</table>

The counter-reset initializes the row counter at the beginning of the table.

Each <tr> in the <tbody> increments the counter using counter-increment.

The ::before pseudo-element is applied to each <tr> within the <tbody>.

The display: table-cell ensures that the generated row number behaves like a proper <td> element.

The content: counter(row-counter) displays the count

For simple understanding think row-counter as a variable. we declare when it initializes the table class.

table {
  counter-reset: row-counter;
}

we want to increment the row-counter value for every tr in the table body

tbody tr {
  counter-increment: row-counter;
}

we want to display the count

tbody tr::before {
  content: counter(row-counter);

}

for more details you can refer https://www.w3schools.com/css/css_counters.asp

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

6 Comments

Please add a description of what you did instead of pointing at web page that may or may not exist in the future
Thanks, but why do you people's answers insist on adding gobs of gobs of extra style lines and not just the bare bones meat and potatoes answer. I'm not asking you to make my table look any different. Just add an index column.
And to tell you the truth, I also actually want to add it as a second column, not the first. I.e., a middle column. I wonder if that is possible!
@DanJacobson the linked-to question at stackoverflow.com/questions/37830238/… shows how to add the content to a pseudo element and you can choose whichever element you want. Maybe tr td:nth-child(2)? Without seeing your basic code it's difficult to advise further.
@mplungjan I just added some description, please check and let me know if I missed something
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.