Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

end0tknr's kipple - web写経開発

太宰府天満宮の狛犬って、妙にカワイイ

html + css による ヘッダ スクロール固定なtable 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <style>
    /* refer to https://csshtml.work/table-scroll/ */
    .scroll_tbl{
      overflow: auto;
      width: 100%;
      height: 200px;
    }
    .scroll_tbl td{
    }
    .scroll_tbl th{
        background: #FFF;
        position: sticky;
        top:  0;
        left: 0;
    }
  </style>

</head>
<body>
  <div class="scroll_tbl">
    
    <table>
      <tr>
        <th>市区町村</th>
        <th>販売済 数</th><th>〃 前回比</th>
        <th>販売中 数</th><th>〃 前回比</th>
      </tr>
      <tr><th>千代田区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>中央区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>港区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>新宿区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>文京区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>台東区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>墨田区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>江東区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>品川区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>目黒区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>大田区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>世田谷区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>渋谷区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>中野区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>杉並区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>豊島区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>北区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>荒川区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>板橋区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>練馬区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>足立区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>葛飾区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
      <tr><th>江戸川区</th><td>999,999</td><td>+999</td><td>999,999</td><td>-999</td></tr>
    </table>
    
  </div>
</body>
</html>