制作一个 td 填充表格宽度答案

【问题标题】：Making a td fill table width制作一个 td 填充表格宽度
【发布时间】：2013-01-29 13:08:02
【问题描述】：

我有一个固定高度为 50 像素、宽度为 100% 的表格。

在该表中，我有两个 div，在同一行，如下所示：

<table>
  <tr>
    <td>
      <div id="1"></div>
    </td>
    <td>
      <div id="2"></div>
    </td>
  </tr>
</table>

第一个 div 有float:left，第二个有float:right。

所以表格是页面的 100%。我希望 div2 包装它的内容，并 div1 填充剩余空间，以便 div2 像这样向右对齐：

+--------------------------------------------------------------+
| [ DIV 1          (Expands)       ][ DIV 2 AND ITS CONTENTS ] |
+--------------------------------------------------------------+

当 div1 的内容少于整行时我目前得到的结果：

+--------------------------------------------------------------+
| [ DIV 1 ][ DIV 2 ]                                           |
+--------------------------------------------------------------+

如果没有桌子，我可以让它直接左右浮动，但是当它们“聚在一起”时，它们会相互包裹而不是彼此相邻。

编辑：我添加了一个新的 jsfiddle here。这是工作示例。尝试从左侧 div 中删除除一个以外的所有链接，然后查看结果。第二个 div 应该留在最右边。我希望我自己解释一下。

【问题讨论】：

您能提供一些代码吗？和可能的 jsfiddle，以便我们可以更好地为您提供帮助
你不需要表格jsfiddle.net/WqsTg
我正在研究 jsfiddle，现在已经完成，请参阅编辑。
虽然 HTML5 已弃用直接在 HTML 中设置宽度，但在您接受的答案中支持 CSS，也请查看 <col />。尝试使用width="0*" 定义列以实现最小宽度，使用width="100%" 定义最大宽度。

标签： html css html-table

【解决方案1】：

使用 td 的“colspan”属性。例如：

    <td colspan=75%> info </td>

【讨论】：

我不想要一个固定的宽度。我想要的是右 div 有一些宽度，左 div 调整它的宽度以填充表格的其余部分，而不是让右 div 移动。
这个答案不正确，不符合 HTML 标准。 <td>colspan：此属性包含一个非负整数值，指示单元格扩展了多少列。它的默认值为 1。”虽然 HTML5 已弃用直接在 HTML 中设置宽度，但请查看 <col />。

【解决方案2】：

首先，您的表格似乎根本没有设置为页面的整个宽度。您想为标记添加宽度样式或宽度属性。

接下来只需在右侧“div”（或更准确地说<TD>）设置一个固定宽度，第一个将填充剩余空间。

正如其他人指出的那样，包装表似乎没有必要。

【讨论】：

【解决方案3】：

解决了将width:100% 添加到表中的问题。

http://jsfiddle.net/HRT5E/1/

table {
    width:100%;
}

【讨论】：

【解决方案4】：

只需将width: 100% 添加到第一个td，浏览器就会自动填充它的宽度。

【讨论】：