目次

HTMLのテーブルにスクロールバーをつける

2016/03/03
雛型用に作成。

やりたい事

以下のようなスクロールバー表示を試みる。もちろんスクロール可能。

実行結果

サンプル

keeeeeeeeeeeeeeeeeeeeeeeeeeeeey 値
1 aaa AAA
2 bbb BBB
3 ccc CCC
4 でーえええええええええええddd DDD
5 eee EEE
6 fff FFF
7 ggg GGG
8 hhh HHH
9 iii III
10 jjj JJJ

サンプルソース

HTML CSS
sample.html
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="sample.css"/>
  </head>
  <body>
    <table id="sample">
      <thead>
        <tr>
          <th class="thc1">keeeeeeeeeeeeeeeeeeeeeeeeeeeeey</th>
          <th class="thc2" colspan="2">値</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="tdc1">1</td>
          <td class="tdc2">aaa</td>
          <td class="tdc3">AAA</td>
        </tr>
        <tr>
          <td class="tdc1">2</td>
          <td class="tdc2">bbb</td>
          <td class="tdc3">BBB</td>
        </tr>
        <tr>
          <td class="tdc1">3</td>
          <td class="tdc2">ccc</td>
          <td class="tdc3">CCC</td>
        </tr>
        <tr>
          <td class="tdc1">4</td>
          <td class="tdc2">でーえええええええええええddd</td>
          <td class="tdc3">DDD</td>
        </tr>
        <tr>
          <td class="tdc1">5</td>
          <td class="tdc2">eee</td>
          <td class="tdc3">EEE</td>
        </tr>
        <tr>
          <td class="tdc1">6</td>
          <td class="tdc2">fff</td>
          <td class="tdc3">FFF</td>
        </tr>
        <tr>
          <td class="tdc1">7</td>
          <td class="tdc2">ggg</td>
          <td class="tdc3">GGG</td>
        </tr>
        <tr>
          <td class="tdc1">8</td>
          <td class="tdc2">hhh</td>
          <td class="tdc3">HHH</td>
        </tr>
        <tr>
          <td class="tdc1">9</td>
          <td class="tdc2">iii</td>
          <td class="tdc3">III</td>
        </tr>
        <tr>
          <td class="tdc1">10</td>
          <td class="tdc2">jjj</td>
          <td class="tdc3">JJJ</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
sample.css
table{
  border-collapse: collapse;
  border-spacing: 0;
}
thead{
  width: 100%;
  display: block;
}
tbody{
  width: 100%;
  height: 11em;
  display: block;
  overflow-y: scroll;
}
th{
  background-color: #ccc;
}
th, td {
  height: 1em;
  padding: 2px;
  border: 1px solid #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
 
.thc1, .tdc1 {
  min-width: 3em;
  max-width: 3em;
}
.thc2 {
  min-width: calc(15em + 5px);
  max-width: calc(15em + 5px);
}
.tdc2 {
  min-width: 10em;
  max-width: 10em;
}
.tdc3 {
  min-width: 5em;
  max-width: 5em;
}

とりあえず判明している事

thead と tbody は display:block がなければセル幅の調整が両方のコンテンツを見て実施されズレは生じないが、display:block が付くと thead と tbody 各々で th, td の幅調整が実施されるのでセル幅にズレが生じてしまう。
colgroup, col による幅統一も display:block の付与で効かなくなる。

そのため、CSS で各 th, td にサイズを指定することになる。

th, td の横幅を width:xxx で指定しても thead と tbody で一致しない。これは th, td の中にあるコンテンツの幅に影響されてしまうため。
幅の変動を防ぐために、th, td には min-width:xxx と max-width:xxx を同じサイズで指定する。これでサイズ以上に広くなった狭くなった、は抑止される。

クラス thc2 で tdc2 と tdc3 の幅の合計の他、5pxを足し込んでいるのは、td を跨いで指定するので 10em + 5em の他、ボーダーやパディングの幅で影響が出るため。

セル 幅をとる要素
thc2 　罫線1px + パディング2px + 幅15em + パディング2px + 罫線1px
tdc2 + tdc3 　罫線1px + パディング2px + 幅10em + パディング2px + 罫線1px + 罫線1px + パディング2px + 幅5em + パディング2px + 罫線1px

table に border-collapse: collapse を指定しているので実際は

セル 幅をとる要素
thc2 　罫線1px + パディング2px + 幅15em + パディング2px + 罫線1px
tdc2 + tdc3 　罫線1px + パディング2px + 幅10em + パディング2px + 罫線1px + パディング2px + 幅5em + パディング2px + 罫線1px

になり、パディング2px + 罫線1px + パディング2px = 5px なので、 10em + 5em の他 5px の幅を足し込まねばならない。

, , ,