Question

我的桌子固定高度为50px，宽度为100％。

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

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

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

因此表格是页面的100％。我希望div2包装它的内容，div1填充剩余空间，以便div2与右边对齐，如下所示：

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

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

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

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

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

Answer 1

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

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

Answer 2

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

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

table {
    width:100%;
}

Answer 3

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

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

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

Answer 4

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

制作td填充表格宽度

4 个答案: