0

我有一张桌子，我正试图让移动设备友好，如下所示：

<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:last 类型

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

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

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

3 回答 3

4

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

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

http://jsfiddle.net/nWPzp/

于 2013-10-29T19:30:59.420 回答
1

如果您不显示表格数据，我发现我的偏好是远离表格并使用列表/div。这里要说的是一些包含表格数据的“响应表”示例：

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

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

于 2013-10-29T19:48:51.080 回答
0

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

于 2013-10-29T20:37:22.333 回答