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>

我还不知道它是否适用于跨浏览器。

表中的固定流体柱

2 个答案: