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

我有一个多栏的表格，这个表格不应该超过某个宽度y

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

但有时列变得太大（文本不应该被包装，它应该被剪裁），并且总宽度大于y

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

这意味着我不想将ALL列缩小某个因素，而是将较大的列“尽可能小”

通过一些简单的JS甚至CSS，这是可能的吗

这里有一个例子：

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

1:100px 2:1100px 3:1300px

这将产生一个具有以下宽度的表格：

1:100px 2:450px 3:450px

下面是一些代码：

HTML:

小提琴：

在本例中，表比包含的div大。 我想要的是，表尊重包含div的宽度，列收缩。但并非所有列都应以相同的系数收缩，例如缩小30%。但较大的列（可能所有列最终都需要收缩）会收缩

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

我还不清楚如何计算不同列的宽度，为此我提出了一个问题：

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

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

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

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

 .col1 {
     max-width: 500px;
 }

 .col2 {
      max-width: 600px;
 }

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

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

---

当文本太长时，我们可以通过这个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;
}

这是演示

---

在理解了实际需求之后，最好使用一个名为

success

的非常小的jquery插件来帮助您。这里是链接

将

宽度

添加到

表中

，它会将表中的内容包装为等于div宽度，但不会显示多余的文本

为了显示多余的文本，

wordbreak

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

---

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

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

JS:

链接到小提琴：

---

---

我相信这是一个很好的直观行为，表中的列会被截断。

您能提供一个JSFIDLE吗？通常表单元格会收缩/包装文本或任何适合的内容。在你的情况下，我怀疑在专栏中有很长的文字或图片导致了这个问题。你能发布一些代码吗？我添加了一个例子，我希望这能清除我想要存档的内容。单元格的内容都是文本还是一些图像？如果您可以将其放在一个简单的提琴中来演示这个问题，它将有助于列中包含不应包装的文本。在我的示例中，我使用了很长的单字来表示这一点。我不希望所有列的最大宽度都相同，因为您的示例中有些列可能超过800。此表是通过jquery或javascript创建的，还是HTML？使用此代码@NickRussler，这些列将自动调整大小，以适应高达800px的内容。他们不会超过它。但当他们的内容超过800像素，他们不能得到更大的，例如900像素。如果我的总宽度为例如1000px，则第一列只需要100px，而第二列需要1000px，这将导致第一列的总宽度为100px，第二列的总宽度为900px。@NickRussler是。。。这不是你想要的吗？如果你不想宽度超过800px，为什么你希望宽度达到900px？我不想破坏文本，我想剪辑它。很抱歉，这个问题很难解释：）我添加了一个例子小提琴，这应该可以解释我的目标。刚才看到了您的确切外观。您必须在“td”中定义一些

min-width

。用于截断多行文本的jquery插件“简洁”将帮助您。这里是你可以找到的链接，我看到了你的要求，删除了

中断字

，这几乎解决了你的问题，我想….

宽度

是你在

表中需要的
但是现在第二列和第三列被剪裁，即使第一列仍然有可用空间：。将其与“What i want table”（我想要什么表）进行比较，您想要剪裁或
td
s以占用其他
td
s？？的相邻可用空间。我希望td占用所有可用空间，然后当没有可用空间时，我希望尽可能多地剪裁最大的列。
td
s的数量是否固定？？或者它在表中是动态的？
-ms-word-break: break-all;
word-break: break-all;

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

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

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

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

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

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();

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

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