使一个td填满整个表格的宽度

Question

我有一个表格，高度为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 这里。 这是可行的示例。 尝试从左侧div中删除所有链接，看看结果。第二个div应该保持在最右边。希望我解释清楚了。

- Twinone

---

请问您能提供一些代码吗？如果可能的话，可以提供一个 JSFiddle 链接，这样我们可以更好地帮助您。 - Eric Goncalves

不需要使用表格 http://jsfiddle.net/WqsTg/ - Eric Goncalves

我正在处理jsfiddle，现在已经完成了，请查看编辑。 - Twinone

虽然HTML5已经废弃了直接在HTML中设置宽度的方式，而是支持使用CSS，就像您所接受的答案一样，但也可以查看<col/>。尝试使用width="0*"来定义最小宽度和width="100%"来定义最大宽度的列。 - Joel Purra

Answer 1

使用"colspan"属性。例如：

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

- tymeJV

---

我不想要一个固定宽度，我想要的是右侧区块有一定的宽度，而左侧区块则根据剩余的表格宽度自适应调整宽度，而不是右侧区块移动。 - Twinone

这个答案是不正确的，也没有遵循HTML标准。<td>colspan属性包含一个非负整数值，用于指示单元格跨越多少列。它的默认值为1。虽然HTML5已经弃用了直接在HTML中设置宽度，但可以查看<col />。 - Joel Purra

Answer 2

将width:100%添加到表格中即可解决问题。

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

table {
    width:100%;
}

- Twinone

Answer 3

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

- Vitaly Schekin

Answer 4

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

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

正如其他人指出的那样，包装表格似乎是不必要的。

- JohnFx