Javascript 是否可以相应地换行？

是否可以包装表格行及其内容（tds），以便表格保持响应？例如：

<table>
<tr>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
</tr>
<tr>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
<td><!---content---></td>
</tr>
</table>

对于某些屏幕尺寸，这两行5是否可以变成两行4和一行2，或者对于其他屏幕尺寸，是三行3和一行1，依此类推

已经尝试过浮动和内联样式，但行始终位于下一行，并且从不相邻对齐，以便td区域看起来无缝我无法访问表结构的html，因此我尝试使用CSS甚至Javascript/jQuery来定位它

---

有什么想法吗？

表格

元素不是按您要求的方式设计的。您所要求的通常被称为响应式UI，我们有许多现成的解决方案。为此，我强烈推荐Bootstrap库/框架

引导系统将允许你们做你们要求的事情。如果您对这种方法不感兴趣，您也可以阅读其他选项（除引导以外的其他框架）。

我总是这样做：

CSS:

.row {
    width: 100%;
}
.row > div {
    float: left;
}
.w25 {
    width: 25%;
}
.w33 {
    width: 33.333333%;
}
.w50 {
    width: 50%;
}

如果您愿意，请添加更多。在这个css之后，您可以在任何地方调用它

<div class="row">
    <div class="w50">1</div>
    <div class="w50">2</div>
</div>

1.
2.

在您的示例（5个单元格）中，您可以将

.w20{width:20%；}

添加到css中，以使用

1）出于您的目的，您可以使用不同类型的表，并根据屏幕大小显示/隐藏其中的一些
以下是您案例的解决方案：

HTML:


。表xs{
显示：无；
边框：1px纯黑；
}
.表xs td{
边框：1px纯蓝色；
文本对齐：居中；
}
@介质（最大宽度：540像素）{
.表xs{
显示：表格；
}
}
/*==中等===*/
.表md{
显示：无；
边框：1px纯黑；
}
.表md-td{
边框：1px纯红；
文本对齐：居中；
}
@介质（最小宽度：541px）和（最大宽度：720px）{
.表md{
显示：表格；
}
}
/*==大===*/
.表lg{
显示：无；
边框：1px纯黑；
}
.表lg td{
边框：1px纯绿色；
文本对齐：居中；
}
@介质（最小宽度：721px）{
.表lg{
显示：表格；
}
}

所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
所容纳之物
如果您无权访问该表，可以根据屏幕大小重新渲染该表

您可以尝试以下方法：


函数可渲染（）{
var myTable=$（“#myTable”）；
var content_var=[“content01”、“content02”，
“content03”、“content04”，
“content05”、“content06”，
“content07”、“content08”，
“content09”、“content10”]；
var htmllgu表=`
${content_var[0]}
${content_var[1]}
${content_var[2]}
${content_var[3]}
${content_var[4]}
${content_var[5]}
${content_var[6]}
${content_var[7]}
${content_var[8]}
${content_var[9]}
`
var html\mdu表=`
${content_var[0]}
${content_var[1]}
${content_var[2]}
${content_var[3]}
${content_var[4]}
${content_var[5]}
${content_var[6]}
${content_var[7]}
${content_var[8]}
${content_var[9]}
`
var htmlxsu表=`
${content_var[0]}
${content_var[1]}
${content_var[2]}
${content_var[3]}
${content_var[4]}
${content_var[5]}
${content_var[6]}
${content_var[7]}
${content_var[8]}
${content_var[9]}
`
var windowW=$（window.innerWidth（）；
如果（窗宽<500）{
$（'#myTable'）.html（html#xsTable）；
}
如果（（窗口宽度>500）和（&（窗口宽度<900））出现其他情况{
$（'#myTable'）.html（html#mdTable）；
}
else$（'#myTable'）.html（html#lgTable）；
}
$（文档）.ready（函数（）{
可渲染（）；
$（窗口）.on（“调整大小”，函数（）{
可渲染（）；
})
});
表格{
显示：表格；
边框：1px纯黑；
}
表td{
边框：1px纯黑；
文本对齐：居中；
}

这里的区别在于您使用的是div而不是表。OP要求获取表格数据，让CSS或JS完全忽略已定义的表。我想，我编辑了这个。我实际上是说这是一个更好的解决方案，使用默认的表结构无法实现他想要的，Snowmonkey是正确的。该表是电子商务模板的一部分，我无权更改。我想用css或jquery作为目标，正如文章中所述。不要使用表-使用div。您真正想要的是flexbox解决方案。下面的评论都没有这样的意思。你可能会在这里找到一些想法：是的，但我没有访问该表的权限。这就是我为什么要问的原因。我没有进入桌子的权限。这就是我为什么要问的原因。@Jerpl在这种情况下，我不认为css只会起作用trick@Jerpl好啊我添加了一个新的解决方案。希望能有帮助。