Sahte elemandan önce :: sonra bir girinti nasıl?

Question

Bir tablom var ve her satırın ilk td numaralı satırına satır numarası eklemek için sözlü öğeden önce CSS :: komutunu kullanmak istiyorum. Benim sorunum, ilk td sararsa ikinci satırın numarası altına girmesi ve bunun üstündeki metinle satır içi olarak başlamasını istiyorum. Bu sadece CSS ile yapılabilir mi?

Örnek:

Düzenleme

https://jsfiddle.net/3yL19zde/

HTML:

<table> 
    <tr> 
    <td>Some really long text that wraps to a second line...</td> 
    <td>Some other column</td> 
    <td>A third column</td> 
    </tr> 
    <tr> 
    <td>Some really long text that wraps to a second line...</td> 
    <td>Some other column</td> 
    <td>A third column</td> 
    </tr> 
</table> 

CSS:

table { 
    width: 480px; 
} 

table td { 
    vertical-align: text-top; 
} 

table tr { 
    counter-increment: rowNumber; 
} 

table tr td:first-child::before { 
    content: counter(rowNumber); 
    min-width: 1em; 
    margin-right: 0.5em; 
    font-weight: bold; 
} 

bağımsız bir table-cell olarak görüntülenebilir böylece, satırın başında yerine ilk hücre içinde sahte elemanı sokmak

Answer 1

:

table { 
 
    width: 500px; 
 
} 
 
tr { 
 
    counter-increment: row; 
 
} 
 
tr::before { 
 
    content: counter(row); 
 
    display: table-cell; 
 
    font-weight: bold; 
 
} 
 
tr::before, td { 
 
    border: 1px dotted #888; 
 
    padding: 5px; 
 
}

<table> 
 
    <tr> 
 
    <td>Some really long text that wraps to a second line...</td> 
 
    <td>Some other column</td> 
 
    <td>A third column</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Some really long text that wraps to a second line...</td> 
 
    <td>Some other column</td> 
 
    <td>A third column</td> 
 
    </tr> 
 
</table>

Answer 2

İşte aynı hücre içinde yapmanın bir yolu (text-indent ve bir miktar dolgu).

table { 
 
    counter-reset: rowNumber; 
 
    width: 480px; 
 
} 
 
td { 
 
    border: 1px dotted #888; 
 
} 
 
td:first-child { 
 
    padding-left: 2em; 
 
    text-indent: -2em; 
 
} 
 
td:first-child:before { 
 
    counter-increment: rowNumber; 
 
    content: counter(rowNumber); 
 
    font-weight: bold; 
 
    display: inline-block; 
 
    text-indent: 0; 
 
    width: 2em; 
 
}

<table> 
 
    <tr> 
 
     <td>Some really long text that wraps to a second line...</td> 
 
     <td>Some other column</td> 
 
     <td>A third column</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Some really long text that wraps to a second line...</td> 
 
     <td>Some other column</td> 
 
     <td>A third column</td> 
 
    </tr> 
 
</table>