【html-css】備忘録-テーブルスクロール

横スクロール
CSSファイルで調整

横スクロール

div要素で囲いながら「overflow-x: scroll」というスタイルでスクロールを設置する。

<div style="overflow-x: scroll">
    ...
</div>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>横スクロールテーブル</title>
</head>
<div style="overflow-x: scroll">
  <table border="1" style="min-width: 1000px;">
    <thead>
      <tr>
        <th>列1</th><th>列2</th><th>列3</th>
        <th>列4</th><th>列5</th><th>列6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>データ1</td><td>データ2</td><td>データ3</td>
        <td>データ4</td><td>データ5</td><td>データ6</td>
      </tr>
    </tbody>
  </table>
</div>

下記のような感じになる。

スクロールバーを出すためにわざとテーブルの最小幅を「style=”min-width: 1000px;」で
1000pxに設定しています。（1000pxより小さく表示しようとするとスクロールバーが表示される）

ただ、スタイルはCSSファイルで調整するのが推奨されるので下記の様にCSSファイルでやるといい。

CSSファイルで調整

まずはhtmlを調整する。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>横スクロールテーブル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="scroll-container">
      <table class="scroll-table">
      <thead>
        <tr>
          <th>列1</th><th>列2</th><th>列3</th>
          <th>列4</th><th>列5</th><th>列6</th>
        </tr>
      </thead>
        <tbody>
          <tr>
            <td>データ1</td><td>データ2</td><td>データ3</td>
            <td>データ4</td><td>データ5</td><td>データ6</td>
          </tr>
        </tbody>
      </table>
  </div>
</body>
</html>

div要素にクラスを追加し、スタイルを削除する。

CSSファイルは下記の様にします。
※若干スタイルが違いますが、スクロールバーとは関係ないので無視

.scroll-container {
  overflow-x: scroll;
  max-width: 100%;
}

.scroll-table {
  border-collapse: collapse;
  min-width: 1000px;
}

.scroll-table th,
.scroll-table td {
  border: 1px solid #000;
}