Javascript 行达到最大高度时如何拆分表列

我有一个从数据库到表的循环数据。但是我只需要1列，除非行超出我的高度限制，否则应该动态创建另一列，或者将数据传输到另一列，并将数据拆分到新列，这可能吗

echo'<table>';
for($res->result() as $rows){
    echo'<tr>';
        echo'<td>'.$rows-Name.'</td>';
    echo'</tr>';
}
echo'</table>';

应该是这样的

Cynthia Abanes       Ronda             Gayly Reniedo
Melde Feliciano      Hiyasmin Gajudo   Joseph Javier 
Chelsea MacKinnon    Mary Jane Reyes   Herminigildo Urbano 
Christine Kostiuk    Ronnie De Guzman  Herminigildo UrbanO
Erick                Annaliza Camino 
Vicky Maglinao       Edwin Marino
Norman Murehwa       Lucelle Caseres 

下面是一个使用的解决方案。使用列表（

ul

）代替将数据打印到表格（

table

）中

注意：调整高度将自动将数据移动到下一列

ul{
列表样式：无；
显示器：flex；
弯曲方向：立柱；
柔性流：柱包裹；
高度：130像素；
}

辛西娅·阿巴斯
梅尔德费利西亚诺
切尔西麦金农
克里斯汀·科斯蒂克
埃里克
维姬·马格里诺
莫雷瓦
隆达
埃尔维拉·里维拉
Hiyasmin Gajudo
玛丽·简·雷耶斯
罗尼·德古兹曼
安娜莉莎·卡米诺
埃德温·马里诺
卢塞尔·卡塞雷斯
快乐的雷尼多
约瑟夫·贾维尔
埃尔米尼吉尔多乌尔巴诺
埃尔米尼吉尔多乌尔巴诺

有一个jquery插件解决方案。也来看看

您可能需要将输出从表更改为divs或无序列表

看起来很简单

没有在这里复制任何代码，因为插件有很多例子，而且博客条目也写得很清楚。

正常的方法是检查

宽度，而不是高度。出于不同的原因，其中一个原因是，你的宽度有限，尤其是在移动设备上，这就是为什么有人会投资

通过媒体查询，您可以制作一个简单的解决方案，如下所示：


表td{
背景颜色：橙色；
}
@介质（最大宽度：400px）{
表td{
显示：块；
边距：0 0 2px 0；
}
}

辛西娅·阿巴斯
梅尔德费利西亚诺
切尔西麦金农
克里斯汀·科斯蒂克
埃里克
维姬·马格里诺
莫雷瓦
隆达
埃尔维拉·里维拉
Hiyasmin Gajudo
玛丽·简·雷耶斯
罗尼·德古兹曼
安娜莉莎·卡米诺
埃德温·马林
卢塞尔·卡塞雷斯
愉快地
约瑟夫·贾维尔
埃尔米尼吉尔多乌尔巴诺
埃尔米尼吉尔多市区酒店
您没有添加链接！很好的解决方案，没有插件。我很想删除我的答案，因为它依赖于一个插件，而且基于许多原因，只有css的解决方案更好。干得好。@caramba我的意思是它的高度是div
Cynthia Abanes       Ronda             Gayly Reniedo
Melde Feliciano      Hiyasmin Gajudo   Joseph Javier 
Chelsea MacKinnon    Mary Jane Reyes   Herminigildo Urbano 
Christine Kostiuk    Ronnie De Guzman  Herminigildo UrbanO
Erick                Annaliza Camino 
Vicky Maglinao       Edwin Marino
Norman Murehwa       Lucelle Caseres