Question

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

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

以上作为我评论的后续内容。

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

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

我改变了你的代码片段： 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 2

修改你的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 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

允许行中不同宽度的列

3 个答案: