表列組的寬度

Question

假設我有一個如下表：

|<--                        Fixed width                          ->|
|<- group width     ->|<- group width     ->|
--------------------------------------------------------------------
| Label 1 | Input 1   | Label 2 | Input 2   | Filler (auto-expand) |
| Label 3 | Input 3   | Label 4 | Input 4   |                      |
| Section header (colspan=5)                                       |
--------------------------------------------------------------------
| Label 5 | Input 5   | Label 6 | Input 6   |                      |
| Label 7 | Input 7   | Label 8 | Input 8   |                      |
--------------------------------------------------------------------

我將如何設置樣式，以使每個列組具有固定的寬度，但每個組下的各個列會自動調整，如下所示：

1. 標簽列調整為顯示該列文本而無需換行所需的最小寬度
2. 輸入列將展開以填充組寬度減去標簽列寬度后剩下的空間。

例：

|<--                        Fixed width                          ->|
|<- group width     ->|<- group width     ->|
--------------------------------------------------------------------
| Label 1   | Input 1 | Label 2 | Input 2   | Filler (auto-expand) |
| Label 3.. | Input 3 | Label 4 | Input 4   |                      |
| Section header (colspan=5)                                       |
--------------------------------------------------------------------
| Label 5   | Input 5 | Label 6 | Input 6   |                      |

在上面，包含標簽1、3和5的標簽列已調整為顯示所有文本而不會被截斷所需的最小寬度（標簽3的寬度）。 同時，對相應的輸入列進行了調整，以使組寬度保持不變。

我在這里有一個結構和初始CSS的jsfiddle。

如果需要，可以隨意調整結構，盡管我希望對其進行最小的更改。 我希望僅通過html結構更改和CSS就能實現。

我也歡迎jquery解決方案。 盡管我還應該提到標簽/輸入行可以動態添加，並且列需要適當調整（所以我不能只在初始文檔加載時設置固定寬度）。

如果還可以更改它，以便不再需要表，那更好。

Answer 1

這是您要找的東西嗎？ 如果是，請查看以下代碼

    // Assume you want widths 60, 90, 120 widths to each header

    var widths = [60, 90, 120];

    $('table td[colspan]').each(function (i, v) {
        var th = $(this),
            width = Math.floor(widths[i] / th.attr('colspan') * 1),
            indStrt = 0;
        th.width(widths[i]);
        th.prevAll().each(function () {
            var ind = $(this).attr('colspan');
            indStrt += ind ? ind * 1 : 1;
        });
        var nextTr = th.closest('tr').next(),
            tds = nextTr.find('td');
        var $siblings = tds.eq(indStrt).nextUntil(tds.eq(indStrt + th.attr('colspan') * 1)).andSelf();
        $siblings.each(function () {
            $(this).width(width);
        });
    });       

根據評論代碼是

    var COLUMN_GROUP_WIDTH=100;
    var TABLE_WIDTH=$("#thetable").width();

    // reset width so we can get proper column widths
    $("#thetable").width("auto");

    $('td.label').each(function (e, v) {
        var labelWidth = $(v).width();
        $(v).width(labelWidth);
        console.log(labelWidth);
        $(v).next().width(COLUMN_GROUP_WIDTH-labelWidth);

    });

    // so we can check total widths
    //$(".header").css("display", "table-row");

    $("#thetable").width(TABLE_WIDTH);

Answer 2

使用table-layout: fixed; 對於這個演示

.col1{
    table-layout: fixed;
}
.col2{
    table-layout: fixed;
}
.col1 td{
    width: 200px;
}
.col2 td{
    width: 200px;
}

根據您對評論的評論，請參閱此更新的演示 。