位置粘贴在Mozilla浏览器无法在Safari浏览器上工作
问题描述:
在Safari浏览器中,位置粘贴功能对Mozilla浏览器不起作用,但在Chrome浏览器中它的工作完美无缺。有谁可以帮助我..我知道我们可以让它不是通过许多其他方式,这是“javaScript”,但我不想在其中使用javaScript。位置粘贴在Mozilla浏览器无法在Safari浏览器上工作
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>
答
Position: sticky
是不是一个标准,所以它可能工作,根据不同的浏览器和版本,甚至需要设置在Web浏览器中配置一些标志。
您可以检查此availavility这里:
http://caniuse.com/#feat=css-sticky
正如你所看到的,在已知问题:
Chrome, Firefox and Safari 7 & below do not appear to support sticky table headers. (see also Firefox bug)
答
由于其唯一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>
所以是否有任何其他的方法,使上滚动表头粘在不使用Java脚本?? – Samar
@Samar好吧,你有两个选择:1)改为使用表格使用div结构(制作更复杂的HTML,CSS和更难代码可读性)2)使用JavaScript。如果还有其他的,我现在不知道。有没有理由不使用JS? – Diego