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

Question

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

示例:jsfiddle .

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

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

有没有办法全部搞定？始终包含所有列和宽度不超过它们必须适合的列的表格？我希望它在必要时打断文字而不是溢出表格。

我可以接受 js/jquery 解决方案，但如果可能的话，最好使用 css。

编辑:

小表:注意:asasdasdasdasdasdasdasdasdasdasdasdasd 是被缩短的一个词，因为表格不能大于这个。

+--------------------+----------+---------+
|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');
    }

});