【发布时间】：2011-03-24 06:06:43
【问题描述】：
我有一个问题，我将正文字体大小设置为 11 像素，但表格显示的字体为 16 像素。我不知道是什么原因造成的——我一次又一次地浏览了 CSS 和输出（浏览页面时的源代码）。将 table font-size 显式设置为 11px 具有预期的效果，但我不需要将其设置为除正文样式之外的任何位置。
我有以下 CSS：
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
background-color: #E7D2B8;
color: #863F2B;
}
img.headerImg {
width: 100%;
}
.menu-strip {
float: left;
width: 20%;
}
.main-content {
float: left;
width: 80%;
}
.clear {
clear: both;
}
ul.menu {
margin: 0px;
margin-left: 10px;
padding: 0px;
list-style: none;
}
ul.menu li {
margin: 0px;
padding: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
div.footer {
width: 60%;
margin-left: 20%;
}
ul.footer-links {
list-style: none;
}
ul.footer-links li {
float: left;
padding: 20px;
}
ul.footer-links li:last {
clear: right;
}
table {
width: 100%;
border-collapse: collapse;
}
td {
vertical-align: top;
}
...输出如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/CustomerApp_v2/CSS/main.css" />
</head>
<body>
<div class="header">
<img class="headerImg" alt="Header image" src="/CustomerApp_v2/Images/header.png" />
</div>
<div class="menu-strip">
<ul class="menu">
<li>Home</li>
<li>Contacts
<ul class="menu">
<li>Customers</li>
<li><a href="/CustomerApp_v2/Agents/Agents.php">Agents</a></li>
<li>Artists</li>
<li>Suppliers</li>
<li>Other</li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<table>
<thead>
<tr>
<td>Code</td>
<td>Forename</td>
<td>Surname</td>
<td>Address</td>
<td>Postcode</td>
<td>Telephone</td>
<td>Fax</td>
<td>Edit</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan='7'></td>
<td><a href='/CustomerApp_v2/Agents/Edit.php'>Create</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>code4</td>
<td>James</td>
<td>Blue</td>
<td>address11<br />address24<br />address32<br />town5<br /></td>
<td>postcode4</td>
<td>fone4</td>
<td>fone2</td>
<td><a href='/CustomerApp_v2/Agents/Edit.php?ID=2'>Edit</a></td>
</tr>
<tr>
<td>code5</td>
<td>Fred</td>
<td>White</td>
<td>address13<br />address24<br />address31<br />town1<br /></td>
<td>postcode2</td>
<td>fone5</td>
<td>fone3</td>
<td><a href='/CustomerApp_v2/Agents/Edit.php?ID=1'>Edit</a></td>
</tr>
</tbody>
</table>
</div><div class="clear"></div>
<div class="footer">
<ul class="footer-links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</body>
</html>
我真的看不到任何可以在表格中将字体大小设置为 16 像素的东西。这发生在所有 3 个部分（thead、tfoot、tbody）。 Netbeans 6.9 似乎也不会正确格式化表格，但它会完成文档的其余部分（之前和之后）。好像桌子出了什么问题，但我看不出是什么。这发生在 Firefox 和 Opera（两者的最新版本）中。我没有在 IE 中测试过，因为它永远不会在 IE 中使用。
【问题讨论】：
标签： html css html-table font-size