html - 按列而不是行填充 html 表？

Question

'<table> 
    <tr>
        <th>' .$varProduct[$x][0].  '</th>'.  //this is a title
       '<th>' .$varProduct[$x][2] . $varProduct[$x][11] . ' </th> // this is a price
    </tr>
</table>'   

这段代码制作了一个如下所示的表格:

Title Price
Title Price
Title Price

但我想填一下

Title Title Title
Price Price Price

我可以使用一些库或 CSS 样式来做到这一点吗？我知道这不是 DOM 通常对齐元素的方式。

好的，现在是这样

Title Title Title Title   //uses up the whole page so goes to next linke
Title Price Price PRice 
PRice

我愿意去

Title Title Title TItle
PRice PRice PRice PRice
Title 
PRice

Answer 1

已更新 fiddle因此，但使用 JS。它应该给你一个想法。

HTML

<div id="dynamic">

</div>

JS

var priceList = [ 'price1', 'price2', 'price3'];
var itemList = [ 'item1', 'item2', 'item3' ];

$('#dynamic').append('<table><caption>DYNAMIC</caption><tr>');   
for (var i=0; i<3; i++){

    $('#dynamic').append('<td>' + itemList[i] + '</td>');
}
$('#dynamic').append('</tr><tr>');

for (var i=0; i<3; i++){

    $('#dynamic').append('<td>' + priceList[i] + '</td>');
}
$('#dynamic').append('</tr></table>');

更新

更新输出

DYNAMIC
item1   item2   item3   item4
price1  price2  price3

查看 updated fiddle请