Question

我似乎无法弄清楚为什么我的表格标题与表格宽度本身不相称。它对我没有任何意义。帮助= \

我附上了问题的图片：

enter image description here

<!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>&nbsp;</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Table Row -->

        <tr>
            <td>Take the dog</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr><!-- Darker Table Row -->

        <tr>
            <td>Waste half</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>20%</td>
            <td>No</td>
        </tr>

        <tr>
            <td><div>Feel inferior</div></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td><div>Some long text that shouldn't resize the box</div></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>100%</td>
            <td>Yes</td>
        </tr>

        <tr>
            <td><div>Vow to complete</div></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>23%</td>
            <td>yes</td>
        </tr>

        <tr>
            <td>Procrastinate</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td>No</td>
        </tr>

        <tr>
            <td><a href="#yep-iit-doesnt-exist">Hyperlink Example</a></td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>80%</td>
            <td><a href="#inexistent-id">Another</a></td>
        </tr>

    </tbody>
    <!-- Table Body -->

</table>
</div>

</body>
</html>

Answer 1

您需要向其添加jQuery才能使其正常运行。原因解释如下。一个非常好的插件将完成你的工作是这个jQuery插件：https://github.com/jmosbech/StickyTableHeaders

在侧面注释中，您不能只将位置固定在桌面标题上，因为用户可能只是在屏幕上的任何位置，它只会看到该位置。必须通过确定表头是否已离开屏幕来触发此操作。

Answer 2

您必须将表格的标题和正文分成2个包含在2个div中的表格。我已经更新了您的评论小提琴，http://jsfiddle.net/3ment/3/

然而，这种技术并不理想，因为它需要逐像素计算，并且它不支持水平滚动。如果您要应用此解决方案，则必须相应地将wrapper，table和th的宽度更改为您的网页。

最好和最简单的方法是使用jQuery插件，就像一个user3393390建议的那样。

希望得到这个帮助。

表格标题与表格宽度有关

2 个答案: