位置粘贴在Mozilla浏览器无法在Safari浏览器上工作

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浏览器中配置一些标志。

您可以检查此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)

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>