表格行显示/隐藏*没有*列宽调整大小,带表格列表:自动

Question

我有多行表,显示待售物品.当用户点击一行时,Javascript会在其下方插入/显示一个新行,其中包含有关该项目的详细信息.问题是当描述很长时,它会强制列宽度重新调整/调整大小.这会改变列位置并且非常烦人,特别是对于用户而言.现在,我有我的table.style.tableLayout:auto.我实际上更喜欢这种方式,因为列调整到内容.

我的问题是:如何动态"锁定"表格中列的宽度,以便在插入/显示新行时,列不会重新调整/调整大小？

我试过了:

1. 动态地将表设置为临时"tableLayout:fixed"
2. 插入/显示我的新行
3. 将表格更改回"tableLayout:auto"

操作1和2适用于FireFox,但不适用于Safari和IE(6和7).然而,做这三个似乎可以防止列移动太多.

沮丧是无法忍受的......失去了很多睡眠......请帮助!

谢谢.

Answer 1

对于那些寻找代码的人(这是在jQuery中完成的).这也假设第一行具有适合每个单元格的宽度.如果需要,很容易改变.

$('table.class_of_table_to_fix tr:first td').each(function() {
   $(this).css({'width': $(this).width()+"px"});
});

Answer 2

您可以在 DIV 中显示被单击的行下方的行的详细信息，并设置其

style="overflow:auto";

这样详细信息就会换行，并且滚动条将可用于显示整个文本。