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 の幅を足し込まねばならない。

技術資料, www, HTML, CSS

努力したWiki

目次

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

やりたい事

サンプル

サンプルソース

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