Question

我有一个表元素。 table元素的宽度手动设置为100％。我已经看到table和tbody是100％。但是，tr和td元素不会填满整个空间。我的HTML如下所示：

<table>
  <tbody style="width:100%; display:block !important; margin: 0 auto;">
    <tr>
      <td style="width:100%; vertical-align:middle; padding-top:0px; height:45px; margin: 0 auto;">
        <span>Left</span>
        <span align="right" class="float:right;">Right</span>
      </td>
    </tr>
  </tbody>
</table>

由于tr和td不会拉伸整个宽度，因此浮动似乎无法正常工作。这只是一个简化的例子。我真的需要在这个例子中使用一个表。出于这个原因，我真的想弄清楚如何使tr / td拉伸整个宽度，而不是寻找另一种解决方法。

有人可以告诉我我做错了什么（除了使用table :)）。

Answer 1

或许这可能？

<table width="100%">
  <tbody>
    <tr>
      <td>
      <span style="position:relative;float:left;">Left</span>
      <span style="position:relative;float:right;">Right</span>
      </td>
    </tr>
  </tbody>

http://jsfiddle.net/8u5Sv/

Answer 2

在您想要向右浮动的范围内，您应该使用样式而不是类。您还应该将tbody样式移动到表格标签：

<table style="width:100%;">
  <tbody>
    <tr>
      <td>
        <span>Left</span>
        <span style="float:right;">Right</span>
      </td>
    </tr>
  </tbody>
</table>

http://jsfiddle.net/GaryHarrower/yX7UP/

你应该看看div，但正如你所提到的，你知道桌子是错的，我不会告诉你这个！：）

希望这有帮助！

如果你好奇，div的例子如下： http://jsfiddle.net/GaryHarrower/45X4h/

内容没有正确浮动

2 个答案: