Change font-size within table cell

html css html-table superscript text-size

40,084

Solution 1

For a basic :

1- put your 'super scripted' text in a 

2- style your  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  and  markups.

Perhaps you should consider keeping on using a 

Solution 2

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!

40,084

Author by

Zephyr Mays

Coast Guard aeronautical engineer & helicopter pilot; excel-ninja-wanna-be, freelance web designer, weather, technology, sports, and political junkie. N4YRG

Updated on December 21, 2020

Comments

Zephyr Mays over 3 years

<!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.

Zephyr Mays over 11 years

Thanks for the prompt response! That would work I think if I wanted all the contents of the cell to be superscripted, but I only want part of the contents of the cell to be adjusted. Also, the font-size: 0.3em; doesn't seem to be recognized within a table. Thoughts?
Jukka K. Korpela over 11 years

Not an improvement in practice. IE incorrectly interprets font-size for sup as relating to the browser’s default size for the element, not (as per the specs) to the font size of the parent. Thus, by setting font-size on sup, you introduce an essential browser dependence.
Milche Patern over 11 years

@JukkaK.Korpela : what do you mean by "you introduce an essential browser dependence" ?
Jukka K. Korpela over 11 years

on conforming browsers, you get 75% of parent element size; on IE, you get 75% of default sup element font size. In practice, on IE, the rule makes font size much smaller than it would be without the rule, whereas on Firefox, it becomes a little larger.