我似乎无法弄清楚为什么我的表格标题与表格宽度本身如此不成比例。这对我来说没有任何意义。帮助=\
这是一个 fiddle : http://jsfiddle.net/3ment/
我附上了问题的图片:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-collapse:collapse;
border-spacing: 0;
table-layout: fixed;
width: 100%;
}
table th {
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-left: 0;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
background: #fafafa;
}
table th, table td {
padding: 10px;
width: 200px;
}
table tr:last-child td {
border-bottom: 0;
}
table tr:hover td {
background: #f2f2f2;
}
#wrapper {
width: 100%;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid rgb(205,205,205);
}
table thead {
position:fixed;
}
table td > div {
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>File Number</th>
<th>Firstname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create</td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog</td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half</td>
<td> </td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td><div>Feel inferior</div></td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><div>Some long text that shouldn't resize the box</div></td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td><div>Vow to complete</div></td>
<td> </td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
<td> </td>
<td> </td>
<td>80%</td>
<td><a href="#inexistent-id">Another</a></td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
</html>
最佳答案
您必须将表格的标题和主体分成 2 个表格，包裹在 2 个 div 中。我已经为您的评论更新了 fiddle ，http://jsfiddle.net/3ment/3/
但是，这种技术并不理想，因为它需要逐像素计算并且不支持水平滚动。如果您要应用此解决方案，则必须根据您的网页相应地更改 wrapper、table 和 th 的宽度。
最好和最简单的方法是使用 jQuery 插件，就像 user3393390 所建议的那样。
希望这对您有所帮助。
关于html - 表格标题与表格宽度不成比例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22522001/