表列组宽度

时间:2013-11-26 04:07:12

标签: javascript jquery html css

假设我有一个如下表:

|<--                        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. 输入列展开以填充组宽度的左侧空间减去标签列宽。
  3. 示例:

    |<--                        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的宽度)。同时,相应的输入列已经调整,以使组宽保持不变。

    我有一个结构的jsfiddle和初始的css here

    如果需要,可以随意调整结构,但我希望对它进行微小的更改。我希望只用html结构更改和css就可以实现这一点。

    我也欢迎jquery解决方案。虽然我还应该提到标签/输入行可以动态添加,并且列需要适当调整(所以我不能只在初始文档加载时设置固定宽度)。

    如果这也可以更改,以便不再需要表格,那就更好了。

2 个答案:

答案 0 :(得分:1)

this您要找的是什么?如果是,请查看以下代码

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

答案 1 :(得分:1)

对此demo

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

根据您评论的预期图片,查看此updated demo