Question

我有一张桌子，我试图让移动设备友好，见下文：

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

Answer 1

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

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

http://jsfiddle.net/nWPzp/

Answer 2

如果你没有显示表格数据，我发现我的偏好是远离表格而是使用list / divs。这里所说的是包含表格数据的“响应表”的一些示例：

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

正如所指出的那样，很多都是css技巧。

Answer 3

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

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

3 个答案: