Change font-size within table cell

Question

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

The `span` element appears in superscript position in an almost unreadable size, as requested in your CSS. So what is the problem? Please specify what “doesn’t seem to work” means, by explaining expected rendering and how the actual rendering (on which browser(s)?) differs from that. Also consider posting a complete, valid example that illustrates some real case where it would make sense to have a long phrase as superscript. Note that you table markup violates HTML table model (and does not really look like something that should be a table). — Jukka K. Korpela, Feb 18 '13 at 17:23
Thanks for the response. Using Safari 6.0.2, I expect the "Note 1" and "Note 2" to render at a size smaller of the other text in the cell. In creating the example above as you suggested, I discovered there may be a lower limit to the size the browser will render a font. Since I want my tables to be 0.8em from the rest of the content, reducing the superscripted text size further may have hit the lower limit of the browsers ability (or 'willingness') to resize the text. Anymore thoughts are greatly appreciated. Regards, Zephyr — Zephyr Mays, Feb 18 '13 at 18:11
Safari, as well as some other browsers, has a user option for setting the minimum font size (and there are very good reasons to this). Superscripting in HTML (or CSS) tends to work poorly in general, so explaining the real goal would help. HTML superscripts are just reduced-size raised characters, not typographically correct, readable superscripts. — Jukka K. Korpela, Feb 18 '13 at 18:23
Apologies, that part was inadvertently deleted when writing the last comment. My goal is to have a table that is rendered 80% of the base font and the superscripted text within the table render some size smaller than the rest of the table's text. I appreciate the responses, — Zephyr Mays, Feb 18 '13 at 18:36

score 2 · Answer 1 · edited May 23 '17 at 10:27

2

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 

edited May 23 '17 at 10:27

Community

1
1

answered Feb 18 '13 at 18:23

Milche Patern

19,632
6
35
52

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. – Jukka K. Korpela Feb 18 '13 at 18:25
@JukkaK.Korpela : what do you mean by "you introduce an essential browser dependence" ? – Milche Patern Feb 19 '13 at 13:18
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*. – Jukka K. Korpela Feb 19 '13 at 14:40

score 1 · Answer 2 · answered Feb 18 '13 at 17:11

1

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!

answered Feb 18 '13 at 17:11

Dotan

6,602
10
34
47

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? – Zephyr Mays Feb 18 '13 at 17:15

Change font-size within table cell

2 Answers2