出于某种原因,我需要在我的 Web 应用程序中显示表格数据,但不使用 native 语义表、thead、tbody、th、td 标签。我发现 CSS 属性使 html 元素“看起来”/“表现”得像表格:
http://www.quirksmode.org/css/display.html
http://www.w3schools.com/cssref/pr_class_display.asp
我尝试了一个小测试,但无法用最少的努力弄清楚如何使 CSS 表格看起来像 native html 表格:
http://jsfiddle.net/rniestroj/6Lyvm/
列完全不对齐。也许我应该在某个地方应用 display: table-column
?但是在哪里呢?
或者我是否需要更多 CSS 和 self 调整大小以使其看起来像原生表格?
还是我误解了什么,这不是 1:1 的替换?
浏览器为 Firefox 8.0b6。
最佳答案
问题在于:.body 和 .footer div。您不为它们分配样式,因此它们呈现为“显示: block ”并破坏您的布局。我添加了“显示:表行组;”到 .body,以及“display: table-footer-group;”到 .footer。这修复了它。
关于html - CSS 显示表格与普通 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15591204/