Question

html的表格有隐藏行，js控制显示和隐藏，现在的问题是显示和隐藏的列宽不一样。如何前后保持一致呢？

大概的代码如下：

<label onclick="toggletr();">show more...</label>

<table>
<tr><td>aaaa</td><td>1111</td>

<tr id="hide" style="display:none"><td>bbbb</td><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</table>
我查到可以用css插入固定宽度的透明背景来固定单元格宽度。如果这个方法可以的话，求1x1px的透明背景图以及css代码例子。

Answer 1

整个表格设置成自动宽度，某一列设置成固定宽度

<label onclick="toggletr();">show more...</label>

<table width="100%">
<tr><td>aaaa</td><td width="固定宽度">1111</td></tr>

<tr id="hide" style="display:none"><td>bbbb</td><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr>
</table>

Answer 2

不用这么麻烦吧，你给每个单元格定义一个宽度不就行了

追问

正在尝试，固定像素不是太好，用百分比不知道实际需要的长度超过百分比会怎么样。

追答

呵呵，如果超了肯定会顶开的，你可以试试给table加一个样式 table-layout:fixed，这样就不变了。示范

....

Answer 3

你都没有</tr>的结束标签 能一样吗？
<table>
<tr><td>aaaa</td><td>1111</td></tr>

<tr id="hide" style="display:none"><td>bbbb</td><td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td></tr>
</table>
这么写你再试试 保证一样宽。

追问

是漏写了啊，我只是在这里举了个简单的例子啊，实际情况肯定不一样我才来问的。

追答

这里面的class="text2" 就是指你在css里定义一个样式为text2的宽度列
CSS文件里这么写
TD.text2 {
border-top-width:thin;
border:hidden;
BORDER-RIGHT: #d5d5d5 1px solid; BORDER-TOP: #d5d5d5 1px solid; BORDER-LEFT: #d5d5d5 1px solid; BORDER-BOTTOM: #d5d5d5 1px solid;
}