html - CSS 将表格列转换为全 Angular 堆叠元素

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 来转换表格的布局，以使其看起来像一个“单列表格”(如果您愿意的话)，同时堆叠类别和描述在 table 的全宽范围内的另一个之上。我已经尝试过 display:block 和 width:100% 但它不起作用跨浏览器。

想法？

Answer 1

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

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