9

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

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

我试过了：

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

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

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

谢谢。

4

5 回答 5

5

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

$('table.class_of_table_to_fix tr:first td').each(function() {
   $(this).css({'width': $(this).width()+"px"});
});
于 2011-04-13T21:44:16.427 回答
1

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

接下来，我永远不会将 css "white-space:nowrap" 放在该表的任何位置。长描述不应该破坏表格布局，它应该在多行上正确环绕，并且如果您设置每列的宽度以适合数据类型，则它是可读的。同样，我会继续使用（不可破坏的空格）来表示日期、时间和数字，并允许文本换行。

除此之外，我在日常工作中这样做，有时你需要停止要求浏览器做一些它不打算做的事情。内容应该流动和适应。将列宽锁定为像素在 99.99999% 的情况下是个坏主意。

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

于 2009-02-12T23:06:36.290 回答
1

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

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

这是使用 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 中测试。这适用于我的特殊情况，因为我有标题列作为参考，但可以重写它以测量其他一些列。

于 2012-02-09T14:00:13.840 回答
0

I don´t know if you´re familiar with jquery, but that´s what I would use - in combination with a separate class for the column that´s causing resizing in the new row - to:

  1. Calculate / get the with of the column
  2. Set the with of the afore mentioned class
  3. Add the row

I haven´t tried it, but that should do it.

By the way, there are probably other ways to do it, I´m just more familiar with jquery (for point 1. and 2.).

于 2009-02-12T14:27:00.360 回答
0

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

style="overflow:auto";

这样细节将被包裹并且滚动条将可用于显示整个文本。

于 2009-02-12T07:51:19.173 回答