自动布局表格的最大宽度答案

【问题标题】：Max width for table with auto layout自动布局表格的最大宽度
【发布时间】：2014-03-11 00:05:08
【问题描述】：

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

此表的列由表布局自动调整大小：自动。

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

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

这意味着我不想按某个因素缩小所有列，而是让较大的列“尽可能小”。

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

这里是一个例子：

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

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-ascending-natural-numbers-which-when-added-to-another-set-o

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

【问题讨论】：

你能提供一个jsfiddle吗？
通常表格单元格会缩小/换行文本或任何适合的内容。在您的情况下，我怀疑列中存在导致问题的长字或图像。你能发布一些代码吗
我添加了一个示例，希望能清除我想要归档的内容。
单元格的内容是全文本还是一些图像？如果您可以将其放在一个简单的小提琴中来演示该问题，那将有所帮助
列包含不应换行的文本。在我的示例中，我使用了很长的单个词来表达这一点。

标签： javascript html css html-table

【解决方案1】：

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

td {
    max-width: 800px;
}

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

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

 .col1 {
     max-width: 500px;
 }

 .col2 {
      max-width: 600px;
 }

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

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

【讨论】：

我不希望所有列的最大宽度都相同，因为您的示例可能超过 800。
这个表是通过 jquery 还是 javascript 创建的，还是 HTML？
@NickRussler 使用此代码，列将自动调整大小以适应其内容最大 800px。他们不会超过它。
但是当它们的内容超过 800 像素时，它们就无法变大，例如900 像素。如果我的总宽度是例如1000px 第一列只需要 100px 但秒 1000px 它应该导致第一列有 100px 和第二个 900px。
@NickRussler 是的......这不是你想要的吗？如果不希望宽度超过 800px，为什么要宽度达到 900px？

【解决方案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/

【讨论】：

我不想破坏文本，我想剪辑它。抱歉这个问题很难解释:)
我添加了一个示例小提琴，它应该可以解释我的目标。
刚刚看到你到底在看什么。你必须在'td`中定义一些min-width。
一个用于截断多行文本的 jquery 插件 'Succinct' 将为您提供帮助。这是您可以找到的链接micjamking.github.io/succinct

【解决方案3】：

将width 添加到您的table 中，它会将内容包裹在等于div 宽度的表格中，但不会显示多余的文本

Demo of what u need exactly

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

demo here

【讨论】：

我看到了你的要求，删除break-word，我猜这几乎解决了你的问题......width 是你在tables 中需要的
但是现在即使第一列仍有可用空间，第二列和第三列也会被剪裁：jsfiddle.net/6zJR4/5。将其与“我想要的表”进行比较
你想剪裁或tds占用其他tds的相邻空闲空间？？
两者。我希望 td 占用所有可用空间，然后当没有可用空间时，我希望尽可能多地剪裁最大的列。
tds 的数量是固定的吗？还是在表格中是动态的？

【解决方案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/

我相信对于列被截断的表来说，这是一种很好且直观的行为。

【讨论】：