HTMLテーブルのヘッダーをフリーズ

HTMLテーブルの最初の行（thead）をフリーズするにはどうすればよいですか？これはjavascriptを介してですか？またはヘッダー行をフリーズするHTMLオプションがありますか？（縦にスクロールするといつでも見ることができます）。HTMLテーブルのヘッダーをフリーズ

HTMLテーブルの最初の行（thead）をフリーズするにはどうすればよいですか？これはjavascriptを介してですか？またはヘッダー行をフリーズするHTMLオプションがありますか？（縦にスクロールするといつでも見ることができます）。

function sortTable(f,n){ 
 
     var rows = $('#mytable tbody tr').get(); 
 

 
     rows.sort(function(a, b) { 
 

 
      var A = getVal(a); 
 
      var B = getVal(b); 
 

 
      if(A < B) { 
 
       return -1*f; 
 
      } 
 
      if(A > B) { 
 
       return 1*f; 
 
      } 
 
      return 0; 
 
     }); 
 

 
     function getVal(elm){ 
 
      var v = $(elm).children('td').eq(n).text().toUpperCase(); 
 
      if($.isNumeric(v)){ 
 
       v = parseInt(v,10); 
 
      } 
 
      return v; 
 
     } 
 

 
     $.each(rows, function(index, row) { 
 
      $('#mytable').children('tbody').append(row); 
 
     }); 
 
    } 
 
    var f_errorStringOfCurrentDataSet = 1; 
 
    var f_errorStringOfMatchedDataSet = 1; 
 
    var f_testCaseNameOfCurrentDataSet = 1; 
 
    var f_regexMatched = 1; 
 
    $("#errorStringOfCurrentDataSet").click(function(){ 
 
     f_errorStringOfCurrentDataSet *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_errorStringOfCurrentDataSet,n); 
 
    }); 
 
    $("#errorStringOfMatchedDataSet").click(function(){ 
 
     f_errorStringOfMatchedDataSet *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_errorStringOfMatchedDataSet,n); 
 
    }); 
 
    $("#testCaseNameOfCurrentDataSet").click(function(){ 
 
     f_testCaseNameOfCurrentDataSet *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_testCaseNameOfCurrentDataSet,n); 
 
    }); 
 
    $("#regexMatched").click(function(){ 
 
     f_regexMatched *= -1; 
 
     var n = $(this).prevAll().length; 
 
     sortTable(f_regexMatched,n); 
 
    });

table { 
 
     padding: 0; 
 
     border-collapse: collapse; 
 
     border: 1px solid #ccc; 
 
     margin-top: 20px; 
 
     table-layout: fixed; 
 
     width: 90%; 
 
    } 
 

 
    td { 
 
     border: 1px solid #ccc; 
 
     padding: 5px; 
 
\t \t word-break: break-word; 
 
    } 
 

 
    tr:nth-child(even) { 
 
     background-color: #f2f2f2 
 
    } 
 

 
    th, td { 
 
     overflow: hidden; 
 
     padding: 5px; 
 
     text-align: left; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> 
 
</script> 
 

 

 
<h2>Hello: </h2> 
 
<br> 
 

 
<br> 
 

 
<table border="1" id="mytable"> 
 
    <thead> 
 
     <tr> 
 
     <th width="14%" id="testCaseNameOfCurrentDataSet">Testcasename</th> 
 
\t \t <th width="5%" id="regexMatched">Regex</th> 
 
     <th width="19%" id="processedErrorStringGuided">Processed Error Current</th> 
 
     <th width="19%" id="processedErrorStringReference">Processed Error Reference</th> 
 
     <th width="5%">Link</th> 
 
     <th width="19%" id="errorStringOfCurrentDataSet">Raw Error Current</th> 
 
     <th width="19%" id="errorStringOfMatchedDataSet">Raw Error Reference</th>   
 
    </tr> 
 
    </thead> 
 

 
    <tbody> 
 
\t \t <tr style="color: red"> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>NO</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
\t \t \t <td> ABCD </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      
 
     </tr> 
 
\t \t <tr style="color: red"> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>NO</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
\t \t \t <td> ABCD </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      
 
     </tr> 
 
\t \t <tr style="color: red"> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>NO</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
\t \t \t <td> ABCD </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      
 
     </tr> 
 
\t \t <tr style="color: red"> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>NO</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
\t \t \t <td> ABCD </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      
 
     </tr> 
 
\t \t <tr style="color: red"> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>NO</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
\t \t \t <td> ABCD </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      
 
     </tr> 
 
\t \t <tr style="color: red"> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>NO</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
\t \t \t <td> ABCD </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      
 
     </tr> 
 
\t \t <tr style="color: red"> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>NO</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
\t \t \t <td> ABCD </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      
 
     </tr> 
 
\t \t <tr style="color: red"> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>NO</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
\t \t \t <td> ABCD </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      
 
     </tr> 
 
\t \t <tr style="color: red"> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>NO</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
\t \t \t <td> ABCD </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      
 
     </tr> 
 
\t \t <tr style="color: red"> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>NO</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      <td>ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
\t \t \t <td> ABCD </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV </td> 
 
      <td> ABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UVABCD EFDH IJKL MNOP QRST UV ABCD EFDH IJKL MNOP QRST UV</td> 
 
      
 
     </tr> 
 

 
    </tbody> 
 
    </table>

出典

2017-05-15 user3570620

あなたは、ヘッダーの位置を保つことができれば、あなたが求めている：固定？ – Keith

はい。垂直方向にスクロールダウンすると、HTML表の最初の行が常に表示されます。 – user3570620

重複していますか？ http://stackoverflow.com/questions/4709390/table-header-to-stay-fixed-at-the-top-when-user-scrolls-it-out-of-view-with-jque –

テーブルのtheadを定義します。その要素と相対的な高さにposition:fixedを割り当てます。 tbodyをposition:absoluteと定義し、先頭をテーブルヘッダーの最後から始めるようにします。

HTML：

<table id="table-1"> 
    <thead> 
     <tr> 
      <th>Col1</th> 
      <th>Col2</th> 
      <th>Col3</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>info</td> 
      <td>info</td> 
      <td>info</td> 
     </tr> 
     <tr> 
      <td>info</td> 
      <td>info</td> 
      <td>info</td> 
     </tr> 
     <tr> 
      <td>info</td> 
      <td>info</td> 
      <td>info</td> 
     </tr> 
    </tbody> 
</table>

CSS：

body { height: 1000px; } 
thead { 
    position: fixed; 
    height: 20px; 
} 
tbody { 
    top: 20px; 
    position: absolute; 
}

jsfiddle：http://jsfiddle.net/fj8wM/6916/

出典

2017-05-15 15:07:42 quirimmo

HTMLテーブルのヘッダーをフリーズ

答えて

関連する問題