創建具有列數增量編號的html表格

Question

我已成功在列上進行增量編號。

這裏我的代碼

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; 
 
}

<table border="1"> 
 
    <tr> 
 
     <th>No</th> <th>Name</th>  
 
    </tr> 
 
    <tr> 
 
     <td></td> <td>jhon</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> <td>lucy</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> <td>joe</td> 
 
    </tr> 
 
</table>

，但我想打表數字，如圖像下面

Answer 1

在table元素上，您的計數器爲1，在第一行上它會增加到2.因此從2開始。您需要在第一個tr上執行重置。

table tr { 
    counter-increment: rowNumber; 
} 
table tr:first { 
    counter-reset: rowNumber; 
} 

Answer 2

在第二個tr處重置計數器。

tr:nth-child(2) { 
 
    counter-reset: rowNumber; 
 
} 
 
table tr { 
 
    counter-increment: rowNumber; 
 
} 
 
table tr td:first-child::before { 
 
    content: counter(rowNumber); 
 
    min-width: 1em; 
 
    margin-right: 0.5em; 
 
}

<table border="1"> 
 
    <tr> 
 
    <th>No</th> 
 
    <th>Name</th> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>jhon</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>lucy</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>joe</td> 
 
    </tr> 
 
</table>

Answer 3

這裏是一個解決您的問題的代碼。在你的代碼中，你正在計算行號爲2的行號。所以從2

其中一個解決您的問題的開始是使用thead和tbody標籤，並增加從tbody行計數器作爲做了如下的解決方案。

table tbody { 
 
    counter-reset: rowNumber; 
 
} 
 
table tbody tr { 
 
    counter-increment: rowNumber; 
 
} 
 
table tr td:first-child::before { 
 
    content: counter(rowNumber); 
 
    min-width: 1em; 
 
    margin-right: 0.5em; 
 
}

<table border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th>No</th> <th>Name</th>  
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td></td> <td>jhon</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> <td>lucy</td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> <td>joe</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 4

您必須重設第二<tr>

櫃檯試試這個

table tr:nth-child(2){ 
    counter-reset: rowNumber; 
} 
table tr { 
    counter-increment: rowNumber; 
} 
table tr td:first-child::before { 
    content: counter(rowNumber); 
    min-width: 1em; 
    margin-right: 0.5em; 
} 

DEMO