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

Question

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

例如：jsfiddle。

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

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

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

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

编辑：

小桌子： 注意：asasdasdasdasdasdasdasdasdasdasdasdasd 是一个被缩短的单词，因为表格不能比这个大。

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

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

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

Answer 1

首先移除“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' });
  });
});     

Answer 2

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

var tds;

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

   tds = $("td");

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

});