<td> 中的 DIV 向右浮动

Question

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

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

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

风格 float:right; 对我不起作用……

原文由 Swag 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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; }

原文由 Tim Wasson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

table {
   width: 100%;
}

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

原文由 Adrift 发布，翻译遵循 CC BY-SA 3.0 许可协议