7

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

示例：jsfiddle。

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

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

有没有办法得到这一切？一个总是包含所有列和不超过它们必须适合的列的表？我希望它在必要时打破文字，而不是溢出桌子。

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

编辑：

小桌子： 注意：asasdasdasdasdasdasdasdasdasdasdasdasd 是一个缩写词，因为桌子不能比这个大。

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

大表：注意：所有列的大小不相等，最好它们随着空白空间均匀分布而增加。

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

2 回答 2

1

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

var tds;

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

   tds = $("td");

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

});
于 2012-05-31T13:15:07.383 回答
0

首先删除“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' });
  });
});
于 2012-06-27T06:13:32.493 回答