允许行中不同宽度的列

Question

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

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的table，示例输出应该如下：

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 作为您的 "table" 的一个包。然后用 JS 我生成一个 div.row 有点像你生成 tr 元素，在那些我生成 div.cell 元素就像你对 td 元素所做的那样并直接在那些 "cells"。

我更改了您的代码段以使其生效： 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);
    }

}

而fiddlelink是here

允许行中不同宽度的列

Allowing different widths of columns in rows

html

javascript

jquery

html-table

rows