具有自动布局的表格的最大宽度

Question

我有一个包含多列的表格，此表格不应超过某个宽度y 。

此表的列由table-layout：auto自动调整大小。

但有时列太大（文本不应该被包裹，应该被剪裁）并且总和大于y的宽度。

在这种情况下，我希望“最大”列变小，直到列的宽度不再超过y 。

这意味着我不想通过某种因素缩小所有列，而是使更大的列“尽可能小”。

这是通过一些简单的JS甚至CSS来实现的吗？

这是一个例子：

我有3列，最大总宽度y为1000px。
这里列的内容大小：

1：100px 2：1100px 3：1300px

这应该导致具有这些宽度的表：

1：100px 2：450px 3：450px;

这里有一些代码：

HTML：

<div>
    <table>
        <tr>
            <td>SomeText</td>
            <td>SomeOtherTextSomeOtherTextSomeOtherText</td>
            <td>SomeLongerTextSomeLongerTextSomeLongerTextSomeLongerTextSomeLongerText</td>
        </tr>
    </table>
</div>

CSS：

div {
    border: 1px solid red; 
    width: 500px;
}

table {
    table-layout: auto;
    border: 1px solid grey;
}

td {
    border: 1px solid black;
}

小提琴： http ： //jsfiddle.net/6zJR4/2/

在此示例中，表格大于包含div。 我想要的是该表尊重包含div的宽度和列缩小。 但并非所有色谱柱都应以相同因子收缩，例如缩小30％。 但是较大的列（可能所有列最终都需要缩小）会缩小。

我的方法：我想让浏览器计算列的“理想”大小，然后手动调整大小（= JS）以匹配包含div的最大宽度。

我将如何计算不同列的宽度尚不清楚，我打开了一个mathoverflow问题： https ：//math.stackexchange.com/questions/702067/how-to-find-a-set -of-升序-自然数-这-当添加到另一个设定邻

我希望有一个更简单的解决方案。

Answer 1

只需使用CSS设置TD（表数据）

td {
    max-width: 800px;
}

设置表数据的最大值将保证没有列超过该宽度（但如果未指定重叠，则可能会增加高度）

如果要为不同的列设置不同的最大宽度，请创建多个类：

 .col1 {
     max-width: 500px;
 }

 .col2 {
      max-width: 600px;
 }

然后只需在TD标签中添加一个类。 如果表是动态创建的，请使用JQuery添加类：

 $( "td" ).addClass( "myClass yourClass" );

Answer 2

当文本太长时，我们可以通过这个CSS属性来破坏它们。

-ms-word-break: break-all;
word-break: break-all;

// Non standard for webkit
word-break: break-word;

在表格单元格td您可以添加这个CSS。

td {
    border: 1px solid black;
    -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;
}

这是演示http://jsfiddle.net/kheema/6zJR4/1/

在了解了实际需求之后，最好使用一个名为Succinct的非常小的jquery插件来帮助你。 链接在这里。 http://micjamking.github.io/succinct/

Answer 3

为table添加width ，它会将表中的内容包装为div宽度，但它不会显示多余的文本

演示你需要什么

table.tbl{
    width:100%; /* this will make table equal to div width and clip excess contents*/
    table-layout: fixed;
}

而且，为了显示多余的文字，请word-break它们

table.tbl{
    width:100%;
    table-layout: fixed;
    word-break:break-all;
}

在这里演示

Answer 4

我实现了自己的解决方案：

以下是示例中显示的代码：

JS：

function findOptimalDistribution(Z, z) {
    // Make a working copy
    var Y = Z.slice(0);

    // Add dummy element so the 'lowest' value is 1, increment z accordingly
    Y.unshift(1);
    z++;

    // calculate sum of Y
    var R = 0;
    for(var i = 0; i < Y.length; i++) {
        R += Y[i];
    }

    // R contains the remaining 'overlap' over z
    R -= z;

    // R <= 0 means the condition is already fullfiled
    if (R <= 0) {
        return Y.slice(1);
    }

    for(var i = Y.length - 1, u = 1; i > 0; i--, u++) {
        var c = (Y[i] - Y[i - 1]);

        var b = (R <= c*u);
        if (b) {
            c = Math.floor(R / u);
        }

        for(var j = Y.length - 1; j >= i; j--) {
            Y[j] -= c;
        }
        R -= c * u;

        // Subtract the remainder of R, that got 'lost' due to rounding (Math.floor)
        if (b) {
            for (var j = i; j < i + R; j++) {
                Y[j]--;
            }

            R = 0;
        }

        if (R == 0) {
            break;
        }
    }

    return Y.slice(1);
}

function findOptimalWidths(columns, max_width) {    
    columns.sort(function (a, b) {
        return a.width - b.width;
    });

    var X = columns.map(function(e) {           
        return e.width;
    });

    var optimal = findOptimalDistribution(X, max_width);

    for(var i = 0; i < columns.length; i++) {
        columns[i].width = optimal[i];
    }

    return columns; 
}

function resizeColumns(){
    var columns = [];
    $('table tr:first-child td').each(function(i, e) {
        var $e = $(e);

        $e.css('max-width', 'auto');
        columns.push({elem: $e, width: $e.outerWidth()});
    });



    columns = findOptimalWidths(columns, $('div').innerWidth());

    for(var i = 0; i < columns.length; i++) {
        columns[i].elem.css('max-width', columns[i].width);
    }
}

$(window).resize(function() {
    resizeColumns();
});

resizeColumns();

HTML：

<div>
    <table>
        <tr>
            <td style="background-color: violet;">
                Line
            </td>
            <td style="background-color: green;">
                LongerLineLongerLineLongerLine
            </td>
            <td style="background-color: yellow;">
               VeryLongLineVeryLongLineVeryLongLineVeryLongLineVeryLongLineVeryLongLineVeryLongLineVeryLongLine
            </td>
        </tr>
    </table>
</div>

CSS：

table {
    table-layout:fixed;
    border-collapse: collapse;
}

table td {
    overflow: hidden;
    box-sizing: border-box;
    text-overflow: ellipsis;
}

div {
    width: 100%;
    border: 1px solid red;
}

链接到小提琴： http ： //jsfiddle.net/ujQh7/2/

我相信这是一个表格的良好和直观的行为，其中列被截断。