firefoxがテーブルのヘッダーに適切な幅を表示しない

境界線とtd境界線がfirefoxでは揃っていませんが、chromeでは境界線がありません。私のテーブルには完全にアラインされているので、ハードコーディングされた幅があり、それでもすべてのものがそれを認識していないのです。また、inspect要素で指定された幅が、私が両方のブラウザで提供している幅と異なることがわかります。クロームでいいですが、火のキツネは私を助けてくれていません。ありがとうございます。 firefoxがテーブルのヘッダーに適切な幅を表示しない

<!DOCTYPE html> 
 
\t <head> 
 
\t <style type="text/css"> 
 
\t \t th,td{ 
 
\t border-right:2px solid blue; 
 
\t border-bottom: 2px solid blue; 
 
\t \t } 
 
\t </style> 
 
\t </head> 
 
\t <body> 
 
\t <table id="example3" style="display:inline-block;""> 
 
\t  <thead style="background-color: wheat"> 
 
\t  <tr> 
 
\t   <th width="50px"><input style="float:left" type="checkbox"></th> 
 
\t   <th width="180px">Model</th> 
 
\t   <th width="180px">Color</th> 
 
\t   <th width="180px">Year</th> 
 
\t  </tr> 
 
\t  </thead> 
 
\t  <tbody style="display:inline-block;overflow-x:hidden;overflow- 
 
     y:auto;height:100px;"> 
 
\t  <tr><td width="50px"><input type="checkbox"></td><td width="180px"> 
 
     <span><input type="text"></span></td><td width="180px"><input 
 
     type="text"></td><td width="180px"><span><input type="text"></span></td> 
 
     </tr> 
 
\t  <tr><td width="50px"><input type="checkbox"></td><td width="180px"> 
 
     <span><input type="text"></span></td><td width="180px"><input 
 
     type="text"></td><td width="180px"><span><input type="text"></span></td> 
 
     </tr> 
 
\t  <tr><td width="50px"><input type="checkbox"></td><td width="180px"> 
 
     <span><input type="text"></span></td><td width="180px"><input 
 
     type="text"></td><td width="180px"><span><input type="text"></span></td> 
 
     </tr> 
 
\t  <tr><td width="50px"><input type="checkbox"></td><td width="180px"> 
 
     <span><input type="text"></span></td><td width="180px"><input 
 
     type="text"></td><td width="180px"><span><input type="text"></span></td> 
 
     </tr> 
 
\t  <tr><td width="50px"><input type="checkbox"></td><td width="180px"> 
 
     <span><input type="text"></span></td><td width="180px"><input 
 
     type="text"></td><td width="180px"><span><input type="text"></span> 
 
     </td></tr> 
 
\t  <tr><td width="50px"><input type="checkbox"></td><td width="180px"> 
 
     <span><input type="text"></span></td><td width="180px"><input 
 
     type="text"></td><td width="180px"><span><input type="text"></span></td> 
 
     </tr> 
 
\t  <tr><td width="50px"><input type="checkbox"></td><td width="180px"> 
 
     <span> 
 
     <input type="text"></span></td><td width="180px"><input type="text"> 
 
     </td><td width="180px"><span><input type="text"></span></td></tr> 
 
\t  <tr><td width="50px"><input type="checkbox"></td><td width="180px"> 
 
     <span> 
 
     <input type="text"></span></td><td width="180px"><input type="text"> 
 
     </td><td width="180px"><span><input type="text"></span></td></tr> 
 
\t  </tbody> 
 

 
\t  </table> 
 
\t  <input type="button" id="add" value="add"> 
 
\t  </body> 
 
\t  </html>

出典

2017-05-18 hariaon

削除表示：インラインブロック; – tech2017

できません。私はスクロール体が必要です – hariaon

次のCSSを追加します。

th, td{ 
    box-sizing: border-box; 
}

幅が増加するように見えているようです。

このCSSプロパティを要素に追加しないと、境界線は常にそのサイズを大きくします。

出典

2017-05-18 19:16:14 Daniel

私もそれを試みましたが、それはFirefoxのように私のヘッダーを台無しにしているようです。私が言ったようにクロムは問題ない – hariaon

firefoxがテーブルのヘッダーに適切な幅を表示しない

答えて

関連する問題