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

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

});