通过列而不是行来填充html表? [英] Fill an html table by column instead of row?

问题描述

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

此代码创建了一个表格，其填写如下:

This code makes a table that fills out like this:

Title Price
Title Price
Title Price

但我想填写

Title Title Title
Price Price Price

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

Can I do this with some library or CSS stylings I know this isn't how the DOM normally aligns elements.

好吧，现在这样

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

推荐答案

已相应更新 fiddle ，但使用JS.它应该给您一个想法.

Updated fiddle accordingly but using JS. It should give you an idea.

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

请更新小提琴

这篇关于通过列而不是行来填充html表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！