按列而不是行填充 html table？

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>'

此代码生成一个 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

我想您想要一个只有两行的 table。顶行包含产品的标题，底行包含价格。正如@scunliffe 所说，遍历标题然后是价格。

print "<table><tr>";

foreach ($varProduct as $value){
    print  "<td>".$value[0]."</td>";
}

print '</tr><tr>';

foreach ($varProduct as $value){
    print  "<td>".$value[2].$value[11]."</td>";
}

print "</td></table>";

Answer 2

相应地更新了 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

按列而不是行填充 html table？

Fill an html table by column instead of row?

html

css

html-table