html - 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转换表格的布局，以使其看起来像一个“单列表”，如果你愿意的话，类别和描述都堆叠在另一个之上桌子。我试过 display:block 和 width:100% 但它不能跨浏览器工作。

想法？

Answer 1

如果你float每个单元格都可以达到你想要的结果。看这个演示：http: //jsfiddle.net/t3ZaM/

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