html - CSS 显示表格与普通 HTML 表格

Question

出于某种原因，我需要在我的 Web 应用程序中显示表格数据，但不使用 native 语义表、thead、tbody、th、td 标签。我发现 CSS 属性使 html 元素“看起来”/“表现”得像表格:

http://www.quirksmode.org/css/display.html

http://www.w3schools.com/cssref/pr_class_display.asp

http://developer.practicalecommerce.com/articles/1941-CSS-display-table-display-table-row-and-display-table-cell-

我尝试了一个小测试，但无法用最少的努力弄清楚如何使 CSS 表格看起来像 native html 表格: http://jsfiddle.net/rniestroj/6Lyvm/列完全不对齐。也许我应该在某个地方应用 display: table-column？但是在哪里呢？

或者我是否需要更多 CSS 和 self 调整大小以使其看起来像原生表格？

还是我误解了什么，这不是 1:1 的替换？

浏览器为 Firefox 8.0b6。

Answer 1

问题在于:.body 和 .footer div。您不为它们分配样式，因此它们呈现为“显示: block ”并破坏您的布局。我添加了“显示:表行组；”到 .body，以及“display: table-footer-group;”到 .footer。这修复了它。

示例:http://jsfiddle.net/6Lyvm/9/