将长表拆分为可视列答案

【问题标题】：Split long table into visual columns将长表拆分为可视列
【发布时间】：2016-07-19 07:03:04
【问题描述】：

现在我有一个简单的表格：

<table>
  <tr>
    <td>char</td>
    <td>XXX</td>
  <tr>
  ... and so
</table>

在视觉上呈现如下：

| Char   | XXX    |
| Char   | XXX    |
| Char   | XXX    |
| Char   | XXX    |
| Char   | XXX    |
| Char   | XXX    |
| Char   | XXX    |
| Char   | XXX    |

但由于我的设计，我需要像这样渲染（并且是响应式的，我使用 bootstrap btw）：

| Char   | XXX    | | Char   | XXX    |
| Char   | XXX    | | Char   | XXX    |
| Char   | XXX    | | Char   | XXX    |
| Char   | XXX    | | Char   | XXX    |

表是从数据库动态创建的，因此我无法控制在表中定义 4 列，我需要类似 style="column-count: 2;" 的东西。

有什么想法吗？？

【问题讨论】：

标签： html css twitter-bootstrap-3 frontend

【解决方案1】：

您可以使用浮动样式创建多个表格，例如：

<table border="2" style="float:left">
<tr><td>  Date  </td><td>  Day  </td><td>  In time  </td><td>  Out time  </td><td>  Signature  </td></tr>
<tr><td>01-Mar </td><td>Tue</td><td>  </td><td>  </td><td>    </td></tr>
<tr><td>02-Mar </td><td>Wed</td><td>  </td><td>  </td><td>    </td></tr>
</table>
<table border="2"><tr>
<tr><td>  Date  </td><td>  Day  </td><td>  In time  </td><td>  Out time  </td><td>  Signature  </td></tr>
<tr><td>16-Mar </td><td>Wed</td><td>  </td><td>  </td><td>    </td></tr>
<tr><td>17-Mar </td><td>Thu</td><td>  </td><td>  </td><td>    </td></tr>
</table>

【讨论】：