iPentec.com  /  Doc  /  CSS

目次

Tableタグのセルで、min-width, max-width プロパティが動作しない - CSS

Tableタグのセルで、min-width, max-width プロパティが動作しない現象について紹介します。

概要

Tableタグのセル(td) で、min-width, max-widthプロパティを記述してもうまく動作しない現象が発生します。 動作確認したところ、複雑な挙動になっているため、具体例を上げつつ紹介します。

1列のみ min-width, max-width プロパティを設定

1列のみに min-width, max-width プロパティを設定した場合の動作を確認します。

コード

CssTableMinMaxWidth.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="CssTableMinMaxWidth.css" />
</head>
<body>
  <table class="Table1">
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="category">Category</th>
        <th class="value">Value</th>
        <th class="memo">Memo</th>
      </tr>
    </thead>

    <tr>
      <td class="id">1</td>
      <td class="title">テストのタイトル</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">2</td>
      <td class="title">テストのタイトル1</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">240</td>
      <td class="memo"></td>
    </tr>
    <tr>
      <td class="id">3</td>
      <td class="title">テストのタイトル2</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">420</td>
      <td class="memo"></td>
    </tr>
  </table>

  <hr/>

  <table class="Table1">
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="category">Category</th>
        <th class="value">Value</th>
        <th class="memo">Memo</th>
      </tr>
    </thead>
    <tr>
      <td class="id">1</tdclass="id">
      <td class="title">テストのタイトル</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">2</td>
      <td class="title">とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">28506800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">1</td>
      <td class="title">さらにさらにとんでもなく、とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">さらにさらに素晴らしく長く、とてつもない長さで、とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

  </table>
  <br />
</body>
</html>
CssTableMinMaxWidth.css
table.Table1 {
  width: 100%;
  border-collapse: collapse;
}

  table.Table1 thead tr th.id {
    min-width: 2rem;
    max-width: 4rem;
  }
  table.Table1 thead tr th.title {

  }
  table.Table1 thead tr th.category {

  }
  table.Table1 thead tr th.value {

  }
  table.Table1 thead tr th.memo {
  }

  table.Table1 tr td {
    border-bottom: 1px solid #808080;
  }

    table.Table1 tr td.id {
      min-width: 2rem;
      max-width: 4rem;
      background-color: #d9f5ff;
    }

    table.Table1 tr td.title {

      background-color: #aeeaff;
      word-wrap: break-word;
    }

    table.Table1 tr td.category {
      background-color: #b1daff;
      word-wrap: break-word;
    }

    table.Table1 tr td.value {

      background-color: #b3caff;
    }

    table.Table1 tr td.memo {
      background-color: #b1b9ff;
    }

解説

一番左の列(ID列)にのみ、CSSでmin-width と max-width プロパティを設定しています。
表が2つありますが、違いは、2列目と3列目の文字列が短い表と、非常に長い表の2種類を用意しています。

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の表示結果となります。
上のテーブルでは、max-width:4rem; が1列目に設定されておりますが、4rem以上の幅となっており、max-widthプロパティは動作していないように見えます。
一方で、下のテーブルでは、min-width:2rem; が動作しているように見え、ウィンドウの幅を狭めてもIDの列の幅は2remより狭くならない動作になっています。



長いコンテンツの1列のみ min-width, max-width プロパティを設定

長いコンテンツの1列のみに対してmin-width, max-height プロパティを設定した場合の動作を確認します。
CssTableMinMaxWidthT.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="CssTableMinMaxWidthT.css" />
</head>
<body>
  <table class="Table1">
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="category">Category</th>
        <th class="value">Value</th>
        <th class="memo">Memo</th>
      </tr>
    </thead>

    <tr>
      <td class="id">1</td>
      <td class="title">テストのタイトル</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">2</td>
      <td class="title">テストのタイトル1</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">240</td>
      <td class="memo"></td>
    </tr>
    <tr>
      <td class="id">3</td>
      <td class="title">テストのタイトル2</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">420</td>
      <td class="memo"></td>
    </tr>
  </table>

  <hr/>

  <table class="Table1">
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="category">Category</th>
        <th class="value">Value</th>
        <th class="memo">Memo</th>
      </tr>
    </thead>
    <tr>
      <td class="id">1</tdclass="id">
      <td class="title">テストのタイトル</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">2</td>
      <td class="title">とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">28506800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">1</td>
      <td class="title">さらにさらにとんでもなく、とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">さらにさらに素晴らしく長く、とてつもない長さで、とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

  </table>
  <br />
</body>
</html>
CssTableMinMaxWidthT.css
table.Table1 {
  width:100%;
  border-collapse: collapse;
}

  table.Table1 thead tr th.id {

  }
  table.Table1 thead tr th.title {
    min-width: 16rem;
    max-width: 32rem;
  }
  table.Table1 thead tr th.category {

  }
  table.Table1 thead tr th.value {

  }
  table.Table1 thead tr th.memo {
  }

  table.Table1 tr td {
    border-bottom: 1px solid #808080;
  }

    table.Table1 tr td.id {
      background-color: #d9f5ff;
    }

    table.Table1 tr td.title {
      min-width: 16rem;
      max-width: 32rem;
      background-color: #aeeaff;
      word-wrap: break-word;
    }

    table.Table1 tr td.category {
      background-color: #b1daff;
      word-wrap: break-word;
    }

    table.Table1 tr td.value {

      background-color: #b3caff;
    }

    table.Table1 tr td.memo {
      background-color: #b1b9ff;
    }

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。


ウィンドウ幅を狭めると、各列の幅が狭まります。


2列目はの列幅は、min-widthプロパティが設定されているため、16remの幅よりは狭くならないです。



min-widthプロパティは動作していることが確認できます。

2列に min-width, max-width プロパティを設定

2列に min-width, max-width プロパティを設定した場合の動作を確認します。
CssTableMinMaxWidth2c.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="CssTableMinMaxWidth2c.css" />
</head>
<body>
  <table class="Table1">
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="category">Category</th>
        <th class="value">Value</th>
        <th class="memo">Memo</th>
      </tr>
    </thead>

    <tr>
      <td class="id">1</td>
      <td class="title">テストのタイトル</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">2</td>
      <td class="title">テストのタイトル1</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">240</td>
      <td class="memo"></td>
    </tr>
    <tr>
      <td class="id">3</td>
      <td class="title">テストのタイトル2</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">420</td>
      <td class="memo"></td>
    </tr>

  </table>

  <hr/>

  <table class="Table1">
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="category">Category</th>
        <th class="value">Value</th>
        <th class="memo">Memo</th>
      </tr>
    </thead>
    <tr>
      <td class="id">1</tdclass="id">
      <td class="title">テストのタイトル</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">2</td>
      <td class="title">とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">28506800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">1</td>
      <td class="title">さらにさらにとんでもなく、とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">さらにさらに素晴らしく長く、とてつもない長さで、とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

  </table>
  <br />
</body>
</html>
CssTableMinMaxWidth2c.css
table.Table1 {
  width: 100%;
  border-collapse: collapse;
}

  table.Table1 thead tr th.id {
  }
  table.Table1 thead tr th.title {
    min-width: 12rem;
    max-width: 16rem;
  }
  table.Table1 thead tr th.category {
    min-width: 12rem;
    max-width: 16rem;
  }
  table.Table1 thead tr th.value {

  }
  table.Table1 thead tr th.memo {
  }

  table.Table1 tr td {
    border-bottom: 1px solid #808080;
  }

    table.Table1 tr td.id {
      background-color: #d9f5ff;
    }

    table.Table1 tr td.title {
      min-width: 12rem;
      max-width: 16rem;
      background-color: #aeeaff;
      word-wrap: break-word;
    }

    table.Table1 tr td.category {
      min-width: 12rem;
      max-width: 16rem;
      background-color: #b1daff;
      word-wrap: break-word;
    }

    table.Table1 tr td.value {

      background-color: #b3caff;
    }

    table.Table1 tr td.memo {
      background-color: #b1b9ff;
    }

表示結果

上記のHTMLファイルをWebブラウザで表示すると、下図のページが表示されます。


ウィンドウ幅を狭めます、ウィンドウ幅が狭まるに従って、各枠の幅が狭まりますが、min-widthプロパティを設定した2列目、3列目は 12rem 以下の幅には狭まらないことが確認できます。


2，3列目の幅が 12rem以下にならないため、さらにウィンドウ幅を狭めると、票の幅は100%で指定していますが、ページの幅より表のほうが大きくなって横スクロールバーが表示されます。


3列に min-width, max-width プロパティを設定

3列に min-width, max-width プロパティを設定した場合の動作を確認します。
CssTableMinMaxWidth3c.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="CssTableMinMaxWidth3c.css" />
</head>
<body>
  <table class="Table1">
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="category">Category</th>
        <th class="value">Value</th>
        <th class="memo">Memo</th>
      </tr>
    </thead>

    <tr>
      <td class="id">1</td>
      <td class="title">テストのタイトル</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">2</td>
      <td class="title">テストのタイトル1</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">240</td>
      <td class="memo"></td>
    </tr>
    <tr>
      <td class="id">3</td>
      <td class="title">テストのタイトル2</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">420</td>
      <td class="memo"></td>
    </tr>
  </table>

  <hr/>

  <table class="Table1">
    <thead>
      <tr>
        <th class="id">ID</th>
        <th class="title">Title</th>
        <th class="category">Category</th>
        <th class="value">Value</th>
        <th class="memo">Memo</th>
      </tr>
    </thead>
    <tr>
      <td class="id">1</tdclass="id">
      <td class="title">テストのタイトル</td>
      <td class="category">テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">2</td>
      <td class="title">とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">28506800</td>
      <td class="memo"></td>
    </tr>

    <tr>
      <td class="id">1</td>
      <td class="title">さらにさらにとんでもなく、とても長くて長くて、長すぎるぐらい長くてながながながながながながながながいテストのタイトル</td>
      <td class="category">さらにさらに素晴らしく長く、とてつもない長さで、とても長くて、長すぎるぐらい長々しい、テストのカテゴリ</td>
      <td class="value">6800</td>
      <td class="memo"></td>
    </tr>
  </table>
  <br />
  
</body>
</html>
CssTableMinMaxWidth3c.css
table.Table1 {
  width: 100%;
  border-collapse: collapse;
}

  table.Table1 thead tr th.id {
  }
  table.Table1 thead tr th.title {
    min-width: 12rem;
    max-width: 16rem;
  }
  table.Table1 thead tr th.category {
    min-width: 12rem;
    max-width: 16rem;
  }
  table.Table1 thead tr th.value {
    min-width: 6rem;
    max-width: 8rem;
  }
  table.Table1 thead tr th.memo {
  }

  table.Table1 tr td {
    border-bottom: 1px solid #808080;
  }

    table.Table1 tr td.id {
      background-color: #d9f5ff;
    }

    table.Table1 tr td.title {
      min-width: 12rem;
      max-width: 16rem;
      background-color: #aeeaff;
      word-wrap: break-word;
    }

    table.Table1 tr td.category {
      min-width: 12rem;
      max-width: 16rem;
      background-color: #b1daff;
      word-wrap: break-word;
    }

    table.Table1 tr td.value {
      min-width: 6rem;
      max-width: 8rem;
      background-color: #b3caff;
    }

    table.Table1 tr td.memo {
      background-color: #b1b9ff;
    }

表示結果

上記のHTMLファイルをWebブラウザで表示すると、下図のページが表示されます。


Webブラウザのウィンドウ幅を狭めると各列の幅が縮まります。


2,3列目は 12rem より幅は狭くならず、4列目は 6rem より幅は狭くなりません。


さらにウィンドウ幅が狭くなると、ページ幅より表のほうが大きくなり横スクロールバーが表示されます。

動作のまとめ

以上の結果から、Tableタグ内のセルでは、min-width プロパティは動作するが、max-width プロパティは無視される動作であることが確認できます。
著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

最終更新日: 2021-11-21
作成日: 2021-07-13
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
コンテンツ
YouTube
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.