sub align only text underneath one element

Question

When I try to create a character c as sub-aligned, the followed bar text in table row also gets sub-aligned (very unintuitive).

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

Can someone point out, what I am doing wrong or how to fix this.

Here is the fiddle: https://jsfiddle.net/aaL06scu/

Answer 1

Use this:

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

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

From the official CSS specification:

Lower the baseline of the box to the proper position for subscripts of the parent's box.
https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

Explanation (Why this happens):
The <tbody> is using vertical-align:middle;. These rule verticaly center the whole content of <tbody>. The <td> element inherit this rule. And you can see the whole content (with subscript) is on the middle. The whole content with subscript is a little bit higher than without the subscript and the middle is not on the middle of the letters, because the subscript extend the height of the whole text. If you want to set the letters to one line you have to vertical-align to the baseline. The baseline is the position or line where the letters will be placed. If you do that on all contents of a row the text (not in subscript) should be on one line (see example).

Answer 2

Use <sub> tag instead

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

Output: test foo_c bar

For more reference on <sub> check http://www.w3schools.com/tags/tag_sub.asp