2012-04-15 2 views
1

Chromeの表のセルのパディングに問題が発生しています。表のセルに純粋なテキストが含まれていないと、パディングはまったく適用されないようです。Chromeで表のセルのパディングが発生する

私のマークアップ:

<table> 
     <tr> 
      <th></th> 
      <th class="account-picture"></th> 
      <th class="account-name">Name</th> 
      <th class="account-email">Email</th> 
      <th class="account-last">Last Sign in</th> 
     </tr> 

     <tr> 
      <td> 
       <fieldset> 
        <ul>   
         <li><input type="checkbox" id="enabled" name="test[]" value="enabled"></li> 
        </ul>  
       </fieldset> 
      </td> 

      <td class="account-picture"> 
        <div class="online"> 
         <img src="http://www.genengnews.com/app_themes/genconnect/images/default_profile.jpg">       </div> 
      </td> 
      <td class="account-name">test test test test test test test test test test test test test test test test test test</td> 
      <td class="account-email">test test test test test test test test test test test test test test test test test test</td> 
      <td class="account-last">15 April 2012 10:19 AM</td> 
     </tr> 
</table> 

CSS:

img{ 
    height: 42px; 
    width: 42px; 
} 

td, th{  
    padding: 0 12px; 
    vertical-align: middle; 
} 

.account-picture{ 
    width: 40px; 

} 

.account-name{ 
    min-width: 100px; 
} 

.account-email{ 
    min-width: 120px; 
} 

.account-last{ 
    min-width: 140px; 
} 

table{ 
    table-layout: fixed; 
    float: none; 
    width: 100%; 
    margin-top: 10px; 
} 

td, th{  
    word-wrap: break-word; 
    padding: 0 12px; 
    vertical-align: middle; 
} 

td:first-child, th:first-child{ 
    width: 14px; 
} 

とフィドル:http://jsfiddle.net/5mPFk/1/

そして、これはそれがFirefoxの11のようにレンダリングするものです: enter image description here

Chrome:18(最新): enter image description here

IE9: enter image description here

としてはではなく、クロムと、IEとFFが正常に動作し、見ることができます。なぜこれが起こっており、これに対して何が可能か?

+0

もしもあなたの 'input'要素を閉じるのに役立つかもしれません:' 'ですが、Chromeがそれをうまく処理できないのは奇妙なことがわかります...(同じことがあなたの' img'要素btwにあります) – Torious

+0

閉じた入力要素でも同じ問題が発生します。 HTML5 doctypeを使用している場合、入力タグを閉じる必要はないとは思いますが。 – F21

答えて

0

削除しましたtable-layout: fixedと思われます。

table-layout: fixedを使用する場合は、min-widthの代わりにwidthを使用して列幅を定義する必要があります。

なぜChromeだけが再生されたのかわかりませんが、おそらく標準実装が優れています。

関連する問題