Chrome、Safariがテーブルの最大幅を無視する件
2023-09-23 21:26:08
質問
このようなHTMLコードを持っています。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
</head>
<body>
<table style="width:100%;">
<tr>
<td>
<table style="width:100%; max-width:1000px; background:#000099;">
<tr>
<td>
001
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
問題は、ChromeとSafariが無視する
"max-width:1000px"
私の友人は、それを防ぐために
"display:block"
を追加することで防げることを発見し、どうにか動いています。
そこで、私が知りたいのは - この問題を解決する他の方法はあるのか、そしてなぜこのようなことが起こるのか、ということです。
どのように解決するのですか。
最大幅が適用されるのは
ブロック要素
.
<table>
は
ブロック
でも
インライン
. 十分曖昧でしょう?あなたは
display:block; max-width:1000px
を忘れて
width:100%
. ChromeとSafariはルールに従います!
2017年5月編集:ご注意ください!このコメントは7年前(2010年!)に書かれたものです。ブラウザはこの数年で大きく変わったと思われます (私はもう Web デザインをやっていないので分かりませんが)。私はより新しいソリューションを使用することをお勧めします。
関連
-
[解決済み] input type="button "に背景画像を追加するには?
-
[解決済み] Chromeの同一生成元ポリシーを無効にする
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] チェックボックスとそのラベルをクロスブラウザーで一貫して揃える方法
-
[解決済み] ウェブサイト制作のためのChromeキャッシュの無効化
-
[解決済み] Flexbox:水平方向と垂直方向の中央揃え
-
[解決済み] localStorage、sessionStorage、session、cookieの違いは何ですか?
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は?
-
[解決済み] div内の画像の下に余分なスペースがある
-
[解決済み】自己署名付きlocalhost証明書をChromeが受け入れるようにする方法
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] BootstrapのCollapse Navbarが動作しない
-
[解決済み] HTMLとCSSによるテーブルスクロール [重複]について
-
[解決済み] HTMLで表示される上下の三角形(軸のない矢印)に使用できる文字は何ですか?
-
[解決済み] HTML5でfloat入力タイプはありますか?
-
[解決済み] 複数のノンブレイキングスペース("nbsp")ではなく、タブスペースを使用しますか?
-
[解決済み] preタグでテキストを折り返すにはどうしたらよいですか?
-
[解決済み] Bootstrap 3 の sr-only とは何ですか?
-
[解決済み] テーブル内のテキストアラインクラス
-
[解決済み] メモ帳++でXML/HTMLを自動整形/インデントする方法
-
[解決済み] マークダウンにおける相互参照 (名前付きアンカー)