mozillaでもサファリでもポジションスティッキーは機能しません

Question

mozillaではポジションスティッキーがSafariブラウザーでも機能しませんが、クロムでは完全に機能しています。誰かが私を助けることができる人ですか？私はそれが "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

を使用すると、既知の問題で、見ることができるように：に適切に応答していない唯一のtable要素以来

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

Answer 2

をposition: stickyそしてそれはthの要素なので、スティッキーポジショニングに適用するには、カスタムを作成しないでくださいtheadとそのカスタムtheadにposition: stickyを適用しますか？

実施例：

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