允许行中不同宽度的列

Question

我试图让表格列在每一行上具有不同的宽度。我正在使用一个数组来获取我要转换为宽度百分比并将其传递到列中的值。输出似乎复制了上面的行，即使它具有不同的宽度。

http://jsfiddle.net/0182rutf/2/

HTML

<table border='1' id="table">

JS

var Array = [
    [10, 5, 10],
    [50, 2, 10]
];

for (var k = 0; k < Array.length; k++) 
{       
    var totalCol = 0;
    $.each(Array[k], function (){totalCol += parseInt(this);});
    $('#table').append('<tr id="' + k + '"></tr>')    
    for (var i = 0; i < Array[k][i]; i++) 
    {          
       var weight = Array[k][i];
       var width = weight * 100 / totalCol;
       $('#' + k).append('<td width="' + width + '%">column</td>');
    }

}

知道如何解决这个问题吗？

Answer 1

修改您的 JS 以形成基于 div 的表格，示例输出应如下所示：

HTML

<div id="row1">
    <div class="float-left div1">1st </div>
    <div class="float-left div2">2st </div>
    <div class="float-left div2">3st </div>
    <div class="clear-fix"></div>
</div>
<div id="row2">
    <div class="float-left div1">1st </div>
    <div class="float-left div2">2st </div>
    <div class="float-left div2">3st </div>
    <div class="clear-fix"></div>
</div>

CSS

.float-left {
    float:left;
    border: 1px solid #ccc;
}
#row1 .div1 {
    width:100px;
}
#row1 .div2 {
    width:200px;
}
#row1 .div3 {
    width:50px;
}

#row2 .div1 {
    width:50px;
}
#row2 .div2 {
    width:100px;
}
#row2 .div3 {
    width:20px;
}

.clear-fix {
    clear:both;
}

Answer 2

因此，作为我上面评论的后续行动。

我建议在这里使用 flexbox。但是，既然您知道要绘制的每一列的宽度，您也可以不使用它并仍然保持 IE9 支持。

我在这里所做的只是让 div#grid 充当“表格”的包。然后使用 JS 生成一个 div.row 就像你生成 tr 元素一样，在这些元素中我生成 div.cell 元素，就像你对 td 元素所做的那样，并直接在这些“单元格”上设置宽度。

我改变了你的 sn-p 工作： http://jsfiddle.net/0182rutf/5/

CSS：

#grid {
    border: 1px solid black;
}

#grid .row {
    position: relative;
}

#grid .cell {
    display: inline-block;
    box-sizing: border-box;
    border: 1px solid green;
}

JS：

var Array = [
    [10, 5, 10],
    [50, 2, 10]
];

for (var k = 0; k < Array.length; k++) 
{       
    var totalCol = 0;
    $.each(Array[k], function (){totalCol += parseInt(this);});
    $('#grid').append('<div class="row" id="' + k + '"></div>')    
    for (var i = 0; i < Array[k][i]; i++) 
    {          
       var weight = Array[k][i];
       var width = weight * 100 / totalCol;
        $('#' + k).append('<div class="cell" style="width: ' + width + '%">column</div>');
       console.log(weight);
    }

}

HTML：

<div id="grid"></div>

请注意，根据您的计算，50 是一个过多的重量:)

Answer 3

我想如果你觉得舒服的话，你可以使用这个解决方案。我创建了两个表并分配了一行。

<table border='1' id="table0"></table>
<table border='1' id="table1"></table>

并且脚本代码是

var Array = [
    [10, 5, 10],
    [50, 2, 10]
];

for (var k = 0; k < Array.length; k++) 
{       
    var totalCol = 0;
    $.each(Array[k], function (){
        totalCol += parseInt(this);

    });
    $('#table' + k).append('<tr id="' + k + '"></tr>')    
    for (var i = 0; i < Array[k].length; i++) 
    {          
       var weight = Array[k][i];
       var width = weight * 100 / totalCol;
       $('#' + k).append
       ('<td width="' + width + '%" >column</td>');
       console.log(weight);
    }

}

小提琴链接是here