更改表格单元格中的字体大小

时间:2013-02-18 17:04:26

标签: html css html-table superscript text-size

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

我想更改表格单元格内容的部分内容的文本大小和位置,但上述内容似乎不适用于表格单元格中的文本。我希望能够调整表格元素的大小,而不仅仅是为了上标目的。

2 个答案:

答案 0 :(得分:2)

基本:

1-将您的“超级脚本”文字放在<sup>

以这种方式设置你的<sup>

sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  top: -0.5em;
  vertical-align: baseline;
}

关于同一主题的同样有趣的问题:

[编辑] : 一些用户提到了一些浏览器“buggy”行为,其中<sub><sup>标记的字体大小相对较小。

也许您应该考虑继续使用<span>

答案 1 :(得分:1)

它不起作用,因为您没有定义单元格类 只是把

 class="super_script"

在td标签中。

要更改单元格的大小,请确保

 table {table-layout: fixed;}

你应该被设定!