Question

这个问题多次出现过。当我向下滚动时，我想要修复表格的标题，我该怎么做？我的表格代码如下所示

<table class="specifictableheight table table-striped">
<h3>TEST</h3>
<thead>
<tr>
<th>Places</th>
<th>Hits</th>
</tr>
</thead>
<tbody>
<?php
foreach ($top3overRestaruants as $key => $value)
{
?>
<tr class="<?= $isactive ? 'alert-success' : ''; ?>">
<td><?= $key ?></td>

<td><?= $value ?></td>
</tr>
<?php
}
?>
</tbody>
</table>

Answer 1

你走了。

<强> HTML：

<div class="wrapper">
    <table class="specifictableheight table table-striped">
        <h3 class="table_title">TEST</h3>
        <br />
        <thead>
            <tr class="tr_first">
                <th>Places</th>
                <th>Hits</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
            <tr>
                <td>entry</td>
                <td>entry</td>
            </tr>
        </tbody>
    </table>
</div>

<强> CSS：

.table_title {
    position: fixed;
    background: #000;
    color: #fff;
}

.tr_first {
    top: 150px;
    position: relative;
}

.wrapper {
    height: 150px;
    overflow: scroll;
}

演示jsfiddle：http://jsfiddle.net/q2jRu/

Answer 2

简单：请首先为头部制作单独的div并为该div提供id e.i然后在css规则中生成#head {position：fixed;} 现在解决你的问题。

如何在滚动时使表头静态

2 个答案: