Come si ottiene un rientro dopo :: prima dell'elemento pseudo?

Ho una tabella e voglio usare il CSS :: before pseudo element con un contatore per aggiungere un numero di riga al primo td di ogni riga. Il mio problema è che se il primo td avvolge la seconda riga inizia sotto il numero, e mi piacerebbe che iniziasse in linea con il testo sopra di esso. Questo può essere fatto solo con i CSS?Come si ottiene un rientro dopo :: prima dell'elemento pseudo?

Esempio:

Modifica

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

fonte

2016-06-19 Chris_F

avrei inserire lo pseudo-elemento all'inizio della riga invece che all'interno della prima cella, in modo che possa essere visualizzato come indipendente table-cell:

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>

fonte

2016-06-20 00:00:32 Oriol

non sapevo di 'display: table-cell', questo è esattamente quello che mi serviva. –

Nota 'display: table-cell' non è completamente indispensabile. Se non lo usi, lo pseudo-elemento sarà racchiuso all'interno di una cella di tabella anonimo in base a [oggetti tabella anonimi] (https://www.w3.org/TR/CSS21/tables.html#anonymous-boxes), quindi il testo sarà ancora "rientrato" come desideri. Ma per motivi di stile è più semplice se lo pseudo-elemento è la cella stessa. – Oriol

Ecco un modo per farlo all'interno della stessa cella (usando text-indent e qualche padding).

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>

fonte

2016-06-20 00:17:02 Midas

Come si ottiene un rientro dopo :: prima dell'elemento pseudo?

risposta

Problemi correlati