1. ホーム
  2. Web制作
  3. CSS

[CSSチュートリアル】テーブルの最大幅と最小幅の相性問題と解決策を解説

2022-02-02 06:14:13

テーブルのmin-widthとmax-widthのプロパティを設定する

<table>

 <tr><td>1</td><td>2</td></tr>

</table>

table{min-width:60%;min-width:100%;}


しかし、クロームはmax-widthに対応していませんし、ie7もどちらにも対応していません。

解決方法 テーブルの外側をdivで囲み、そのdivにmin-widthとmax-widthを設定する。

<div class="table-wrap">

 <table>

  <tr><td>1</td><td>2</td></tr>

 </table>

</div>
.table-wrap{width:500px;min-width:60%;min-width:100%;}

.table-wrap table{width:100%;}

テーブルのmax-widthとmin-widthの設定と相性問題の解決法についての記事はこちらです。テーブルのmax-widthとmin-widthについては、Script Houseの過去記事を検索するか、以下の関連記事を引き続き閲覧してください。