具有自動布局的表格的最大寬度

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/

我相信這是一個表格的良好和直觀的行為，其中列被截斷。