Frontend Masters Boost RSS Feed https://frontendmasters.com/blog Helping Your Journey to Senior Developer Tue, 13 Feb 2024 16:33:08 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 225069128 Do you ever wish the table you were looking at had numbered rows? https://frontendmasters.com/blog/do-you-ever-wish-the-table-you-were-looking-at-had-numbered-rows/ https://frontendmasters.com/blog/do-you-ever-wish-the-table-you-were-looking-at-had-numbered-rows/#respond Tue, 13 Feb 2024 16:32:19 +0000 https://frontendmasters.com/blog/?p=815 needed numbering, but when I wanted to know the “rank” of some of the items, I found myself wishing it did. Fortunately, CSS […]]]> I had the thought gosh I wish this table’s rows were numbered when I was looking at the big table of Interop 2024 popular votes. I don’t know the that the <table> needed numbering, but when I wanted to know the “rank” of some of the items, I found myself wishing it did.

Fortunately, CSS has a quick answer:

table {
  counter-reset: tr;
  tbody tr {
    counter-increment: tr;
    :where(td, th):first-child::before {
      content: "#" counter(tr) ": ";
    }
}

The idea there is that you can count things in CSS with CSS counters, then display that value as a pseudo element slapped in there wherever you want it. The nesting is nice there as you can just plop it into any ol’ applied CSS and adjust the selector to the table you need it to.

]]> https://frontendmasters.com/blog/do-you-ever-wish-the-table-you-were-looking-at-had-numbered-rows/feed/ 0 815