Change font-size within table cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Superscript_size_in_table_cell</title>
<meta name="generator" content="BBEdit 10.5" />
<style>
table {
width: 60%;
font-size: 0.8em;
margin-left:auto;
margin-right:auto;
border-collapse: collapse;
}
.super_script {
font-size: 80%;
vertical-align: super;
}
</style>
</head>
<body>
<table id="table_1a-27">
<caption class="table_caption">Table 1A-27</caption>
<tr>
<td>Some text<span class="super_script">Note 1</span></td>
</tr>
<tr>
<td>
<ol>
<li>Beginning of sentence<span class="super_script">Note 2</span> than the rest of the sentence.</li>
<li>Some stuff here</li>
</ol>
</td>
</tr>
</table>
</body>
</html>
I want to change the text size and position for part of the contents of a table cell but the above doesn't seem to work for text within a table cell. I'd like be able to adjust the size if the table elements, not just for superscripting purposes.
Answer
For a basic :
1- put your 'super scripted' text in a <sup>
2- style your <sup> this way :
sup {
position: relative;
font-size: 75%;
line-height: 0;
top: -0.5em;
vertical-align: baseline;
}
Also interesting questions around same subject :
- Wrong rendering of <sup> in table with valign=top in Chrome and Safari
- relative font-size of <sub> or <sup> and their descendants in IE
- Keep consistent line spacing with <sup> and <sub>
- Html upper and lower indecies
[Edit] :
Some users mentioned some browser 'buggy' behaviours with relative sizing of font-size for the <sub> and <sup> markups.
Perhaps you should consider keeping on using a <span>