Html 更改表格单元格内的字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14941518/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change font-size within table cell
提问by Zephyr Mays
<!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.
我想更改表格单元格部分内容的文本大小和位置，但上述内容似乎不适用于表格单元格中的文本。我希望能够调整表格元素的大小，而不仅仅是为了上标。
回答by Milche Patern
For a basic :
对于基本：
1- put your 'super scripted' text in a <sup>
1- 将您的“超级脚本”文本放入 <sup>
2- style your <sup>this way :
2-风格你<sup>这样：
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
- 在 Chrome 和 Safari 中使用 valign=top 错误地渲染表中的 <sup>
- <sub> 或 <sup> 及其后代在 IE 中的相对字体大小
- 使用 <sup> 和 <sub> 保持一致的行距
- Html 上下索引
[Edit]:
Some users mentioned some browser 'buggy' behaviours with relative sizing of font-size for the <sub>and <sup>markups.
[编辑]：一些用户提到了一些浏览器的“错误”行为，这些行为与<sub>和<sup>标记的字体大小的相对大小有关。
Perhaps you should consider keeping on using a <span>
也许你应该考虑继续使用 <span>
回答by Dotan
it doesn't work because you didn't define the cell class just put
它不起作用，因为您没有定义刚刚放置的单元格类
class="super_script"
in the td tag.
在 td 标签中。
to change the size of cells make sure you do
要更改单元格的大小，请确保您这样做
table {table-layout: fixed;}
and you should be set!
你应该被设置！
