CSS中实现表格序号自增,不仅可以让我们更方便地进行阅读,还可以帮助我们更好地对表格中的数据进行理解。具体实现方法如下:首先,我们可以给表格的每个单元格添加一个data属性,用来记录该单元格在表格中的
<table> <tbody> <tr> <td data-row="1" data-column="1">单元格1</td> <td data-row="1" data-column="2">单元格2</td> <td data-row="1" data-column="3">单元格3</td> </tr> <tr> <td data-row="2" data-column="1">单元格4</td> <td data-row="2" data-column="2">单元格5</td> <td data-row="2" data-column="3">单元格6</td> </tr> </tbody> </table>
<style> table { counter-reset: my-counter; } </style>
<style> td:before { content: counter(my-counter); counter-increment: my-counter; } td[data-row='1'][data-column='1']:before { content: "1"; } td[data-row='1'][data-column='2']:before { content: "2"; } td[data-row='1'][data-column='3']:before { content: "3"; } td[data-row='2'][data-column='1']:before { content: "4"; } td[data-row='2'][data-column='2']:before { content: "5"; } td[data-row='2'][data-column='3']:before { content: "6"; } </style>
粉丝
0
关注
0
收藏
0