Question

如果可以包含任意数量的列的页面动态创建，我想要一个100％的表。每列可以包含很长的单词，只要它们都可能不适合一页。为了解决这个问题，我使用table-layout: fixed使页面的所有列都可见。问题是我仍然希望每列的宽度是动态的，这样如果一个列有短词，它应该比带有长词的那个短。

示例：jsfiddle。

表1始终显示所有列，但是当页面足够宽时，即使其他列中有可用空间，它也会破坏该单词。

当页面比列宽时，表2工作正常，但当窗口较小时，第一列将其他列推出屏幕/其他对象。

有没有办法解决这一切？一个表，它总是包含不比它们必须适合的所有列和列？如果它必须而不是溢出表格，我希望它能打破这些词语。

我可以接受js / jquery解决方案，但是如果可以使用css则更可取。

编辑：

小桌子：注意：asasdasdasdasdasdasdasdasdasdasdasd是一个字缩短，因为该表不能大于此。

+--------------------+----------+---------+
|asasdasdasdasdasdasd|qweqweqweq|zxczxczxc|
|asdasdasdasdasd     |          |         |
+--------------------+----------+---------+

大桌子：注意：所有列的大小都不相同，最好是随着空格均匀分布而增加。

+--------------------------------------+-------------+------------+
|asasdasdasdasdasdasdasdasdasdasdasd   |qweqweqweq   |zxczxczxc   |
+--------------------------------------+-------------+------------+

Answer 1

如果我理解这可能是一个起点：

var tds;

$("table").each(function() {

   tds = $("td");

    for(var x = 0; x < tds.length; x++){
        tds.eq(x).css('max-width', '100px');
    }

});

Answer 2

首先删除“table-layout：fixed”属性。

尝试以下代码，这在您的情况下应该完美无缺：

$(document).ready(function(){

 $("table").find('tr').children('td').each(function () {
     var wdth = $(this).html().length + 10;
     $(this).css({ 'padding-right': '10px' }, { 'width': wdth + 'px' });
  });
});

具有动态列但布局固定的表

2 个答案: