CSS将表列转换为全宽堆叠元素

Question

我发现很多方法只使用DIV创建一个“无表格”的表布局，但很少有相反的方法。

我有几个带有表结构的html页面，它们都引用了一个常见的CSS文件。这些表有一个简单的2列布局如下：

<table>
  <tbody>
    <tr>
      <th>category</th>
      <td>description</td>
    </tr>
    <tr>
      <th>category</th>
      <td>description</td>
    </tr>
  </tbody>
</table>

我希望能够通过仅限CSS 来转换表格的布局，以便让它看起来像一个“单列表格”，如果你愿意的话，堆叠的类别和描述在表的全宽范围内的另一个。我尝试过显示：块和宽度：100％但不起作用跨浏览器。

思想？

Answer 1

如果float每个单元格，您可以获得所需的结果。 请参阅此演示：http://jsfiddle.net/t3ZaM/

适用于FF，Chrome，Opera，Safari，IE9和10但我无法检查旧版本的IE，因为我没有它们。