差分

このページの2つのバージョン間の差分を表示します。

--- documents:proglang:js:web-002 [2026/05/12 23:02] – ↷ documents:proglang:web-002 から documents:proglang:js:web-002 へページを移動しました。 k896951
+++ documents:proglang:js:web-002 [2026/05/12 23:10] (現在) – k896951
@@ 行 1: / 行 1: @@
+====== 002.HTMLのテーブルにスクロールバーをつける ======
+/03/03 \\
+雛型用に作成。
+===== やりたい事 =====
+以下のようなスクロールバー表示を試みる。もちろんスクロール可能。
+{{:documents:other:other-043-001.png?nolink|実行結果}}
+===== サンプル =====
+<php>
+echo '<style type="text/css">';
+echo file_get_contents("/usr/local/www/wiki.hgotoh.jp/wiki/data/media/documents/web/sample.css");
+echo "</style>";
+</php>
+<html>
+    <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>
+</html>
+===== サンプルソース =====
+^ HTML ^ CSS ^
+|<code html 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>
+</code>|<code css 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;
+}
+</code>|
+====== とりあえず判明している事 ======
+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 の幅を足し込まねばならない。
+{{tag> 技術資料 www HTML CSS }}