[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の過去記事を検索するか、以下の関連記事を引き続き閲覧してください。
関連
-
[CSSチュートリアル】CSSスコープ(スタイル分割)の使い方まとめ
-
[CSSチュートリアル】CSSで2カラムレイアウトを実現するN種類のメソッド
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSSチュートリアル】overflow:hiddenの役割を解説(overflow hidden、clear float、外周マージンの崩れを解決する)。
-
[CSSチュートリアル】CSSで実現するイメージマッピングメソッド
-
[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。
-
[CSSチュートリアル】ピュアCSSで作るスクロールシャドウ効果
-
[CSSチュートリアル]適応的な幅と高さの矩形の16:9の例を達成するためのCSS
-
[CSSチュートリアル】SCSS50%スタイルコード削減のための14の実践レッスン
-
[CSSチュートリアル】ピュアCSS3による水平無限スクロールのサンプルコード
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】純粋なCSSでWebページの内容をコピーできないようにする方法
-
[CSSチュートリアル】CSSのクラスとidの共通命名規則
-
[CSSチュートリアル】CSSカウンターを使った数字の並びの美化方法
-
[ブラウザ互換性チュートリアル]IE9でのネイティブページの互換性問題の解決方法について
-
[css3]CSS3ベジェ曲線サンプル:リンクホバーアニメーション効果の作成
-
[css3]CSS3アニメーションによるグラフィックドロップ効果
-
[CSSチュートリアル]フレックス内のボタンを縦に中央寄せにしない意外な解決法
-
[css3]CSS 3.0テキストホバー飛び効果コード
-
[css3]css3は、最初と最後のテキスト実行例を実現するためのコード
-
[CSSチュートリアル】CSSマージンの重なりと解決策を詳しく探る