【问题标题】:CSS display table vs normal HTML TableCSS 显示表与普通 HTML 表
【发布时间】:2011-12-20 18:04:03
【问题描述】:

出于某种原因,我需要在我的 Web 应用程序中显示表格数据,但不使用本机、语义表、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 表格看起来像原生 html 表格: http://jsfiddle.net/rniestroj/6Lyvm/ 列完全不对齐。也许我应该在某个地方申请display: table-column?但是在哪里?

或者我是否需要更多 CSS 和自定尺寸以使其看起来像原生表格?

还是我有什么误解,不是 1:1 的替代品?

浏览器为 Firefox 8.0b6。

【问题讨论】:

  • “出于某种原因” = 我们能问为什么吗? CSS 绝对不能 1:1 替代正确表的使用。
  • 我有一个表格,然后在行中嵌入表格,其中的表格是表格。我对嵌入表格的样式有疑问。

标签: html css html-table


【解决方案1】:

问题在于:.body.footer div。您没有为它们分配样式,因此它们被呈现为“显示:块”并破坏您的布局。我添加了“显示:表行组;”到 .body 和 "display: table-footer-group;" .footer。这解决了它。

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

【讨论】:

  • 我可以在这个 CSS 表格中做 colspan 和 rowspan 之类的事情吗?
  • 很遗憾,我不知道该怎么做。
  • 不,你不能拥有 colspanrowspan 的等价物
猜你喜欢
  • 2011-11-29
  • 1970-01-01
  • 2014-09-22
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-08-16
  • 2010-11-11
  • 2017-04-30
相关资源
最近更新 更多