Menu
<!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.
380
To change the font size in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property font-size. HTML5 do not support the <font> tag, so the CSS style is used to add font size.
style=font-size:12px, change 12 to whatever font size suits your needs. You could add this code inline to the <table> tag, the <tr> tag or to each <th> tag. A few options but this is the code you need: style=font-size:12px, change 12 to whatever font size suits your needs.
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 :
[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>
192
it doesn't work because you didn't define the cell class just put
class="super_script"
in the td tag.
to change the size of cells make sure you do
table {table-layout: fixed;}
and you should be set!
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
