14

我有一张桌子和一对夫妇<td>：

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

我想要做的是将“第三” <td>（带有 div）放在表格的右侧，“第一”和“第二”<td>应该留在左边。

风格float:right;不适合我...

4

5 回答 5

19

您需要使表格的宽度为 100%，然后控制前 2 列的宽度，最后右对齐第三列。

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; }
于 2013-07-30T19:14:24.220 回答
6

问题是 a 的宽度<table>默认由其内容决定。如果您希望<table>像块级元素一样跨越 100% 宽度（其包含块的宽度），您可以添加table-layout: fixed;然后指定您的宽度 - 或者只是给它一个宽度，具体取决于您所追求的，例如

table {
   width: 100%;
}

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

于 2013-07-30T19:11:30.940 回答
1

尝试添加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>
于 2013-07-30T19:28:04.043 回答
0 
<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 的版本中引起问题

于 2013-07-30T19:14:11.780 回答
0

我不知道你想用表格和 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>
于 2013-07-30T19:18:52.743 回答