1. ホーム
  2. html

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 デザインをやっていないので分かりませんが)。私はより新しいソリューションを使用することをお勧めします。