HTML表格列的问题

此HTML：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栏应“粘”在一起，就像前两个做

任何建议如何使这一权利？

来源

2011-01-05 Arnis Lapsa

<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>

这将使第一，第三和第四尽可能小，而第二列取其余的宽度。

来源

2011-01-05 14:00:35 Dan

如果第4列将有类似“叮咚叮咚叮咚叮咚”，细胞就会尽管第2列实际上并未使用的空间被分成4行。可以用'style =“white-space：nowrap'修复它，看起来这可能是我正在寻找的东西。 – 2011-01-05 14:17:54

在“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测试了这个

来源

2011-01-05 13:47:00 nedk

我不知道1,3,4 cols的确切宽度。对于1,3我可能会调整它，但不是肯定的第四。 – 2011-01-05 13:56:24

我看到丹有一个类似的想法。 +1给他。 – nedk 2011-01-05 14:36:36

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

体必须是100％的宽度太

为例标记名称：

html文件：

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

为例CSS：

HTML文件：

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

css文件：

#foo { width: 10%; }

或者，如果你想在像素计算宽度使用JavaScript。（我recommande jQuery的兼容性）

jQuery .innerWidth()

来源

2011-01-05 13:53:08

我知道如何设置宽度。无论是在HTML直接或CSS或JS。这不是问题。问题在于我不知道确切的宽度，以及如何在第2列和第3列与第4列一起“粘”第1列，同时用第2列填充剩余空间。 – 2011-01-05 14:01:16

您可以用JavaScript计算的话，计算innerwidth浏览器，超过设定固定的宽度，以每列然后当你添加你知道宽度列在一起，你从你有，你可以把2号的确切宽度innerwidth删除此柱对于为例你有innerwidth的950像素，列1 = 10px的，第3栏第20像素=，第4栏= 30像素，所以你有柱的60像素，你知道，950 - 60 =用于第二列890px。每个客户有不同的innerwidth，这就是为什么它是更好地与jQuery.innerWidth（） – 2011-01-05 14:07:44

或固定宽度为FOO，酒吧，嘶嘶声和嗡嗡声柱和注入在中间的第三另一列 - 它应该自动跨越可用空间。

来源

2011-01-05 13:59:15

工作，如果我会把固定宽度的第2列过小，细胞会分解成2行得太快。如果我把它放得太大 - 尽管第二列实际上没有使用空间，但第三或第四列将会打破。 – 2011-01-05 14:03:03

HTML表格列的问题

回答

相关问题