web-dev-qa-db-ja.com

<td>のDIVは右フロート

いくつかのテーブルを取得しました<td>：

<table>
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px;">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>

私がやりたいことは、「3番目」の<td>（divを含む）をテーブルの右側に配置し、「1番目」と「2番目」の<td>は左のままにしておくことです。

float:right;のスタイルは機能しません...

htmlasp.netcss
11
Swag

テーブルの幅を100％にしてから、最初の2列の幅を制御し、最後に3列目を右揃えにする必要があります。

http://jsfiddle.net/25Mqa/1/

<table>
 <tr>
  <td class="first">First</td>
  <td class="second">Second</td>
  <td class="third">Third</td>
 </tr>
</table>

CSS：

table { width:100%; }
.first, .second { width:50px; }
.third { text-align:right; }
18
Tim Wasson

問題は、<table>は、デフォルトではその内容によって決定されます。 <table>ブロックレベルの要素と同様に、（それを含むブロックの）幅を100％にするには、table-layout: fixed;を入力してから、幅を指定します。または、目的に応じて、幅を指定します。

table {
   width: 100%;
}

http://jsfiddle.net/QEaAd/2/

6
adrift

追加してみてくださいstyle="text-align:right;"

<table>
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px; text-align:right;">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>

2つのdivが近くにある場合のみ：

<div id="fr">div1</div>
<div id="fr">div2</div>

あなたはそれらを正しく浮遊させることができます：

<style>
#fr{float:right;}
</style>
1
user2062658
<table style="width: 100%;">
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px; display: block; float: right;">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>

http://jsfiddle.net/pbesD/

これはあなたが望むことをすると私は信じていますが、私が理解していることから、フローティングテーブル要素はInternet Explorer <8のバージョンで問題を引き起こします

0
user710031

テーブルやdivで何をしようとしているのかわかりませんか？しかし、私は通常、これを電子メール送信者に使用します。

Tdにはalign属性を使用します。これは、あなたのレイアウトがあなたが望むように見えることを確実にするのに大いに役立ちます。そしてそれはすべてのブラウザで動作します:)

[〜＃〜]フィドル[〜＃〜]

HTML：

<table width="100%">
 <tr>
  <td>First</td>
  <td>Second</td>
  <td style="padding:20px;" align="right">
      <div>
        Third
      </div>
  </td>
 </tr>
</table>
0
designtocode