將表td動態分解為單個tr

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（不包括/ td：last類型）之后添加一個/ tr

我的表是動態生成的，因此需要動態解決方案，任何人都對如何處理此問題有任何想法？

以下是理想的結果表的外觀。

<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

如果您不顯示表格數據，我發現我的首選是遠離表格，而使用列表/ div。 話雖這么說，這里還是包含表格數據的“響應表”的一些示例：

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

如前所述，其中很多都是CSS技巧。

Answer 3

試試JS。 使用getElementById。 寫：
document.getElementById（“ dynamic”）。innerHTML =“新代碼”