将表 td 动态分解为单独的 tr

Dynamically break down table td into individual tr's

本文关键字：单独 tr 分解 td 动态 将表      更新时间：2023-09-26

我有一个表格，我试图使移动设备友好，如下所示：

<tbody>
<tr>
  <td>one</td>
  <td>one</td>
  <td>one</td>
</tr> 
<tr>
  <td>two</td>
  <td>two</td>
  <td>two</td>
</tr> 
</tbody>

我希望创建此表的单列，以便它可以在移动设备上更好地显示。从概念上讲，我正在考虑在每个/td 之后添加一个/tr，不包括/td：最后一个类型

我的表是动态生成的，所以它需要动态解决方案，有人对如何处理这个问题有任何想法吗？

下面是结果表的理想外观。

<tbody>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
<tr><td>one</td></tr>
</tbody>
<tbody>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
<tr><td>two</td></tr>
</tbody>

您可以使用CSS和媒体查询实现相同的外观：

@media (max-width: 400px) { /* or whatever you want your mobile breakpoint to be */
    tr, td { float:left; width:100%; }
}

http://jsfiddle.net/nWPzp/

如果您不显示表格数据，我发现我的偏好是远离表格并使用列表/div。 话虽如此，以下是一些包含表格数据的"响应式表"示例：

http://css-tricks.com/responsive-data-table-roundup/

正如所指出的，其中很多都是css技巧。

试试 JS。使用 getElementById。写：
document.getElementById（"dynamic"）.innerHTML="new code"

相关文章：