Question

在Safari浏览器中，位置粘贴在mozilla上不起作用，但在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>

Answer 1

Position: sticky不是标准，因此它可能有效，具体取决于浏览器和版本，甚至您需要在Web浏览器配置中设置一些标记。

您可以在此处查看此可用性：

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

如您所见，在已知问题中：

Chrome, Firefox and Safari 7 & below do not appear to support sticky table headers. (see also Firefox bug)

Answer 2

由于其唯一table元素未对position: sticky做出正确回应，并且因为它只是要将th元素应用于粘性定位到，为什么不构建自定义thead并将position: sticky应用于该自定义thead？

工作示例：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在safari中，位置粘不适用于mozilla

2 个答案: