通过列而不是行来填充html表?

本文介绍了通过列而不是行来填充html表?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 '<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

请更新小提琴