sottoallineamento solo testo sotto un elemento

Question

Quando provo a creare un carattere c come suballineato, anche il testo bar seguito nella riga della tabella diventa sub-allineato (molto poco intuitivo).

<table> 
    <tr> 
    <td>test</td> 
    <td>foo<sel style="vertical-align: sub">c</sel></td> 
    <td>bar</td> 
    </tr> 
</table> 

Qualcuno può segnalare, cosa sto facendo male o come risolvere questo problema.

Ecco il violino: https://jsfiddle.net/aaL06scu/

Answer 1

Utilizzare questa:

td { 
 
    vertical-align:baseline; 
 
} 
 
sel { 
 
    vertical-align:sub; 
 
}

<table> \t 
 
    <tr> 
 
    <td>test</td> 
 
    <td>foo<sel>c</sel></td> 
 
    <td>bar</td> 
 
    </tr> 
 
</table>

Dalla specifiche CSS ufficiale:

Abbassare la linea di base della casella nella posizione corretta per i pedici della casella del genitore.
https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

Spiegazione (Perchè questo accade):
Il <tbody> sta usando vertical-align:middle;. Queste regole verticalmente centrano l'intero contenuto di <tbody>. L'elemento <td> eredita questa regola. E puoi vedere l'intero contenuto (con pedice) nel mezzo. L'intero contenuto con pedice è un po 'più alto che senza pedice e il centro non è al centro delle lettere, perché l'indice estende l'altezza dell'intero testo. Se si desidera impostare le lettere su una riga, è necessario vertical-align alla linea di base. La linea di base è la posizione o la linea in cui verranno posizionate le lettere. Se lo fai su tutti i contenuti di una riga il testo (non in pedice) dovrebbe essere su una riga (vedi esempio).

Answer 2

tag utilizza <sub> invece

<table> 
 
    <tr> 
 
    <td>test</td> 
 
    <td>foo<sub>c</sub></td> 
 
    <td>bar</td> 
 
    </tr> 
 
</table>

uscita: prova pippo _c bar

Per ulteriori riferimento <sub> controllo http://www.w3schools.com/tags/tag_sub.asp