“Position sticky” 在火狐和Safari浏览器上都无法正常工作

Question

在火狐和Safari浏览器上，position: sticky不起作用，但在Chrome浏览器中完美运行。有没有人能帮我解决这个问题...我知道我们可以通过许多其他方法（如"JavaScript"）来实现它，但我不想在其中使用JavaScript。

table thead th { position: -webkit-sticky; position: sticky; top: -1px; background: #ccc;}
.table-div {max-height: 200px; overflow: auto;}
.table-div table td {min-width: 200px;}

    <div class="container">
    <div class="row nopadding">
    <div class="table-div table-responsive">
    <table class="table table-bordered">
        <thead>
            <th>head1</th>
            <th>head1</th>
            <th>head1</th>
            <th>head1</th>
        </thead>
        <tbody>
            <tr>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
            </tr>
            <tr>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
            </tr>
            <tr>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
            </tr>
            <tr>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
                <td style="height: 50px;"></td>
            </tr>
        </tbody>
     </table>
     </div>
     </div>
     </div>

- Israr ahmad

Answer 1

position: sticky不是一个标准，因此它可能会在浏览器和版本上工作，甚至可能需要在Web浏览器配置中设置一些标志。

您可以在此处检查其可用性：

http://caniuse.com/#feat=css-sticky

正如您所看到的，在已知问题中：

Chrome，Firefox和Safari 7及以下版本似乎不支持固定表头。（另请参见Firefox错误）

- Diego N.

---

那么除了使用 JavaScript 之外，是否还有其他方法使表头在滚动时保持粘性？ - Israr ahmad

@Samar 嗯，你有两个选择：1）不使用表格，而使用 div 结构（这会使 HTML 和 CSS 更加复杂，代码可读性更差）2）使用 JavaScript。如果还有其他方法，我现在不知道。有没有不使用 JS 的理由？ - Diego N.

Answer 2

由于只有 table 元素不能正确响应 position: sticky，并且只有你想要应用粘性定位的是 th 元素，为什么不构建一个自定义的 thead 并将 position: sticky 应用于该自定义的 thead 呢？

工作示例：

.custom-thead {
position: -webkit-sticky;
position: sticky;
top: -1px;
min-width: 816px;
}

.custom-thead .custom-th {
display: inline-block;
position: relative;
left: 2px;
min-width: 202px;
margin-right: 2px;
background-color: #ccc;
}

.table-div {
max-height: 200px;
overflow: auto;
}

.table-div table td {
min-width: 200px;
height: 50px;
background-color: #eee;
}

.custom-th {
font-weight: bold;
}

.custom-th, td {
text-align: center;
}

<div class="container">
<div class="row nopadding">
<div class="table-div table-responsive">

<div class="custom-thead">
<div class="custom-th">head1</div><div class="custom-th">head1</div><div class="custom-th">head1</div><div class="custom-th">head1</div>
</div>

<table class="table table-bordered">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>

<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>

<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>

<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

- Rounin