位置粘貼在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>