Hướng dẫn viết CSS số thứ tự trong bảng Table

[blog]

Hướng dẫn các bạn viết CSS số thứ tự trong bảng Table dùng css rowNumber để đánh số thứ tự cho bảng. Hướng dẫn cách để lập chỉ mục các hàng của bảng với bộ đếm (rowNumber) bằng CSS.

Đầu tiên các bạn viết CSS như sau:

<style type='text/css'>table {
    counter-reset: rowNumber;
}
table tr {
    counter-increment: rowNumber;
}

table tr td:first-child::before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}
</style>

Sau đó các bạn viết html cho bảng như sau:

<table border="1">
    <tr>
      <td>Template Blogspot bán hàng</td>
    </tr>
    <tr>
      <td>Template blogspot bất động sản</td>
    </tr>
    <tr>
      <td>Template blogspot landing page</td>
    </tr>
  </table>

Xem kết quả như sau

Template Blogspot bán hàng

Template blogspot bất động sản

Template blogspot landing page

Như vậy là bạn đã làm xong cách đánh số thứ tự cho bảng table bằng css sử dụng rowNumber đơn giản.
[/blog]