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

Question

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

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

我试过了：

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

行动1＆amp; 2适用于FireFox，但不适用于Safari和IE（6＆amp; 7）。但是，做这三个似乎可以防止列移动过多。

沮丧是难以忍受的......失去了大量的睡眠......请帮忙！

感谢。

Answer 1

对于那些寻找代码的人（这是在jQuery中完成的）。这也假设第一行具有适合每个单元格的宽度。如果需要，可以轻松更改。

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

Answer 2

我会在每列上设置百分比宽度作为指导。在每列的TH上只设置一次。如有必要，浏览器仍会将列调整为内容，但列将更加一致地保留在原位。

接下来，我永远不会把css“white-space：nowrap”放在那张桌子上的任何地方。长描述不应该破坏表格布局，它应该在多行上正确环绕，并且如果您在每列上设置宽度以适合数据类型，则可读。类似地，我会继续使用（不可破坏的空格）日期，时间和数字，并允许文本换行。

除此之外，我在我的工作中以透析的方式做这件事，而且有一段时间你需要停止向浏览器做一些不想做的事情。内容应该流动和适应。锁定列宽为像素是错误想法的99.99999％。

PS：如果你真的，真的，真的需要锁定列，我知道唯一适用于CSS2并且适用于所有浏览器的解决方案是使用图像。您可以在每列中插入1px高透明gif图像，并计算单元格的填充（TD），在每个图像（IMG）上设置像素宽度，而不是在列（TH / TD）上设置像素宽度。例如，您可以隐藏TH中的那些。您可以将图像保留为1像素宽并在TD上设置百分比宽度，当您打开新行时，您将获得每个列宽减去TD填充，并将其设置为相应的IMG。我没试过！我只知道在我参与的许多项目中，我使用了小型的gif图像来锁定列之间的最小垂直间距。例如。

Answer 3

当我实现一个包含可以切换的组的表时，我遇到了类似的问题。我希望列之间的初始比率保持不变，而不固定列的宽度。默认情况下，浏览器会根据表行的可见性更改宽度，这是不可取的。

我继续前进并遵循@ faB关于应用百分比的建议，但是使用一个小脚本来计算第三个元素的百分比并在初始渲染后应用它们。这使得我的列保持相同的宽度，即使隐藏了所有行。

这是脚本，它使用jQuery：

(function($){

    var lock_widths = function() {
        var total_width = $('table').innerWidth();
        var headers = $('table th');
        var leftover = 100;

        $.each(headers, function(ix, el) {
            var header = $(el), width;

            // on the last call use the leftover percentage
            if (ix == headers.length - 1) {
                width = leftover;
            } else {
                leftover -= width = header.outerWidth() / total_width * 100; 
            }

            header.css({'width': width + '%'});
        });
    };

    $(document).ready(lock_widths);

})(jQuery);

在IE7 +，Firefox和Chrome中测试过。这适用于我的特殊情况，因为我有标题列作为参考，但它可以重写以测量其他一些列。

Answer 4

您可以在DIV中显示所点击行下面的行的详细信息并设置其

style="overflow:auto";

这样细节就会换行，滚动条可用于显示整个文本。

Answer 5

我不知道你是否熟悉jquery，但这就是我将使用的 - 与一个单独的类相结合，导致在新行中调整大小 - 来：

1. 计算/获取列的内容
2. 设置上述课程的内容
3. 添加行

我没试过，但应该这样做。

顺便说一下，可能有其他方法可以做到这一点，我对jquery更熟悉（对于第1点和第2点）。