How can I add an index to an arbitrary column of a HTML table via CSS? [duplicate]

Question

How can I add an index to an arbitrary column of a HTML table via CSS? In other words get 0, 1, 2 here, without actually having to type them in:

<!DOCTYPE html>
<html>
<head><title>test</title></head>
<body>
 <table border="1">
  <tr><td></td><td>0</td><td></td></tr>
  <tr><td></td><td>1</td><td></td></tr>
  <tr><td></td><td>2</td><td></td></tr>
</table>

P.S., please just tell me how to add the index to say, that middle column. Please don't fluff it up with extra CSS. "I left my car for a muffler change. When I came back I couldn't even find it in the parking lot because they gave it a new paint job."

Dan Jacobson · Accepted Answer · 2025-02-14 12:53:18Z

-1

Here's your answer:

<!DOCTYPE html>
<html>
<head>
 <title>test</title>
 <style type="text/css">
 table { counter-reset: row-counter; }
 tbody tr { counter-increment: row-counter; }
 tr td:nth-child(2)::before { content: counter(row-counter);}
 </style>
</head>
<body>
 <table border="1">
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
  <tr><td></td><td></td><td></td></tr>
</table>

All I know is it works. Don't ask me why. Want to start with 1 instead of 0? Better ask a separate question.

edited Feb 14 at 12:53

answered Feb 14 at 12:46

Dan Jacobson

6065 silver badges19 bronze badges

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

2 Comments

mplungjan Feb 14 at 13:00

If you do not know why, perhaps don't post it as an answer. The explanation is: td:nth-child(2) matches the cell that is the second child of each tr. ::before targets the pseudo-element inserted before the content of the selected <td>

A Haworth Feb 14 at 15:12

Might be better to have edited your initial question - where, incidentally, you were told about nth-child(2).

Collectives™ on Stack Overflow

How can I add an index to an arbitrary column of a HTML table via CSS? [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related