固定-表中的流体列

Question

<table>
  <tr>
     <td>Fixed-Width Column: 250px</td>
     <td>Fluid Width Column: remaining width</td>
  </tr>
</table>

我不会用它来创建页面布局，我需要使用Table。有没有办法实现这种跨浏览器？我已经在这个项目上使用jQuery了，如果有帮助的话？

Answer 1

<table width="100%">
  <tr>
     <td width="250">Fixed-Width Column: 250px</td>
     <td width="*">Fluid Width Column: remaining width</td>
  </tr>
</table>

或者，您可以将样式信息放入css中。它的HTML如下所示：

<table class="styletable">
  <tr>
     <td class="navigation">Fixed-Width Column: 250px</td>
     <td class="maincontent">Fluid Width Column: remaining width</td>
  </tr>
</table>

CSS将为：

.styletable {
    width: 100%;
}

.navigation {
    width: 250px;
}

maincontent将自动获得剩余的宽度。

您可以使用基于<div>的布局来实现相同的结果。html：

<div>
     <div class="navigation">Fixed-Width Column: 250px</div>
     <div class="maincontent">Fluid Width Column: remaining width</div>
</div>

和CSS：

.navigation {
    width: 250px;
    float: left;
}

.maincontent {
    margin-left: 260px;
}

Answer 2

好吧，我猜到了：

<table>
  <tr>
     <td width="250px">Fixed-Width Column: 250px</td>
     <td>Fluid Width Column: remaining width</td>
  </tr>
</table>

我还不知道它是否可以跨浏览器工作。