セル内の表のテキストアラインメント（の中に​​）

Question

これは私が言ったとは思わなかったことです：私はFirefoxとChromeで問題がありますが、IEではうまくいきます！

それは非常にシンプルだが、それが動作しない理由を私は理解していない：

私は、細胞内のテーブルを持っている、と私はセルにstyle="text-align:right"を持っていますが、テーブルは、Firefoxに残って滞在しているとChrome（IEでは素直に右に行く...）。私がセルタグにalign = rightを置くと動作しますが、それをしたくありません。

コードは基本的には次のとおりです。

<table width="1000" border="1" cellpadding="0" cellspacing="0"> 
<tr> 
<td style="text-align:right"> 

<table border="1"> 
<tr><td>Hello</td><td>Hello 2</td></tr> 
</table> 

</td> 

<td>Hello 2</td></tr> 
</table> 

私は、ネストされたテーブルは、幅= 100％またはそのような何かになりたくない...

それはdoesnの理由を誰もが私に説明してもらえそれを修正する方法、そしてFirefoxやChromeではなくInternet Explorerで動作する理由は何ですか？

Answer 1

私の推測では、ChromeとFFは実際に正しくレンダリングされていると思います。 text-alignはおそらくtable要素に影響しないはずです。ただし、テーブルにfloat:rightを適用すると、あなたが望むことができます。

Answer 2

私は、コンテナを基準にしてテーブルを揃えるCSSの方法がmarginプロパティを持つことを追加したいと思います。

センターに配置する場合はmargin: 0 auto;を追加し、右側に配置する場合はmargin-left: auto;を追加する必要があります。

@maxedisonが言うように、text-alignはinlineとinline-block要素でのみ動作しますので、他のソリューションは、これらの表示値の一部を取るためにあなたの内のテーブルを変更しています。

text-alignは 'コンテナからコンテンツへ'ということから覚えておく必要があります。コンテンツに影響を与えるために通常コンテナに適用されます（pのテキストなどのインラインコンテンツに適用されます） margin: 0 autoは 'content-to-container'から機能します。つまり、ブロック要素に通常適用され、そのコンテナに関連する位置に影響します（divに適用して親に合わせます）。

Answer 3

あなたが（ない完全な機能を備えた）、それを修正したい場合は、あなたがこれを書くことができます。

table { 
    display: inline-block; 
} 

親要素（複数可）に適用される場合、これは、text-align: center;を中心にすることがあなたのテーブルができます。あなたはdiv要素はフローティングさせたくないとき

Answer 4

、あなたはこれを試すことがあります。 http://jsfiddle.net/NvEZ8/

<div style="text-align:right;"> 
    <table style="display:inline-block"> 
     <tbody> 
     <tr> 
      <td></td> 
      <td>one</td> 
      <td>two</td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

それは（DOCTYPE htmlので）テキスト整列のように見えるだけChromeとインラインブロックに影響を及ぼしインライン要素のみではありません。ここでインラインでブロックをインラインで置き換えてもChromeではうまくいきません