Question

这个html：

<html>
<head></head>
 <body style="width:100%;">
  <table style="width:100%;">
   <tr>
    <td>foo</td>
    <td>bar</td>
    <td>fizz</td>
    <td>buzz</td>
   </tr>
  </table>
 </body>
</html>

绘制：

alt text

问题是我需要这样的东西：

alt text

前两列应该“粘在一起”
第二列应展开并使用未使用的空间
第3和第4列应该像前两个一样“粘在一起”

有关如何做到这一点的任何建议吗？

Answer 1

<table style='width:100%'>
    <col width="1" />
    <col>
    <col width="1" />
    <col width="1" />
    <tr>
        <td>foo</td>
        <td>bar</td>
        <td>fizz</td>
        <td>buzz</td>
    </tr>
</table>

这将使第一，第三和第四列尽可能小，而第二列则占据宽度的其余部分。

Answer 2

在“foo”，“fizz”和“buzz”上设置固定宽度。给“条”100％宽度。

修改

<table style='width:100%'> <col> <col width="100%" /> <col> <col> <tr> <td>foo</td> <td>bar</td> <td>fizz</td> <td>buzz</td> </tr> </table>

这应该使第二列100％宽度并允许其他列中的内容也展开。我在Firefox 3.6和Chrome 9中测试过它。

Answer 3

给他们％宽度（标记名或CSS）

正文也必须是100％宽度

例如标记名：

html文件：

<td width="10%"></td>

例如css：

html文件：

<td id="foo"></td>

css文件：

#foo  { width: 10%; }

如果要以像素为单位计算宽度，请使用javascript。（我推荐jQuery兼容性）

jQuery .innerWidth()

Answer 4

或固定foo，bar，fizz和buzz列的宽度，并在中间插入另一列作为第三列 - 它应自动跨越可用空间。

Html表列问题

4 个答案: