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

标签 html css html-table

出于某种原因,我需要在我的 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。

最佳答案

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

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

关于html - CSS 显示表格与普通 HTML 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15591204/

相关文章:

javascript - 使用 javascript/jquery 遍历包含 HTML 的字符串中的所有标签

html - 如何在没有绝对的情况下将div附加到底部?

html - Windows 中 Outlook 上的表格宽度未占用指示的宽度

html - 在响应式设计中移动整个 TD?

c# - 如何使用动态模型创建动态表

html - 如何使用 CSS 将图像添加到 anchor 标记?

html - 如何设置月份类型输入的默认内容?

html - 我怎样才能使我的菜单正确响应

javascript - 我可以强制尝试不崩溃吗?

html - 将网格元素跨越到 CSS 网格的整个宽度