程序员经验分享-hwhale

CSS 显示表格与普通 HTML 表格

2023-12-07

由于某种原因，我需要在我的 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 的替代品？

浏览器是火狐8.0b6。


问题在于：.body and .footer分区。您没有为它们分配样式，因此它们会呈现为“显示：块”并破坏您的布局。我添加了“显示：表行组；”到.body，和“显示：表页脚组；”到.footer。这解决了它。

例子：http://jsfiddle.net/6Lyvm/9/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

htmltable

CSS 显示表格与普通 HTML 表格 的相关文章

  • Wkhtmltopdf 每页右侧的垂直文本

    下面是使用 wkhtmltopdf 生成的 PDF 示例 我需要在每一页的右书脊上生成文本 我尝试将其添加到标题代码中 似乎会剪辑 PDF 的正文 我正在使用 wkhtmltopdf 的页眉和页脚参数 不太确定如何或是否可以在每个页面的右侧

  • 如何使用 bootstrap-select 在每个选择选项上添加工具提示

    我正在尝试使用 bootstrap select 将工具提示添加到每个选择选项 当我检查时 似乎 select js 将 select 标签转换为 ul 我不知道这是我的代码不起作用的原因 html div class form group

  • 如何向 div 添加“闪耀”叠加层？

    如何添加如下图所示的漂亮叠加层 考虑以下 HTML 我将如何添加这样的覆盖层 我知道我可以在它上面使用渐变 并对角应用它 但我也可以弯曲它吗 div class photostrip div class overlay div img sr

  • 仅在 Safari 中位于 div 外部的文本

    我有这个错误 让一些文本出现在右侧 div 之外的几个像素处 奇怪的是 这种情况只发生在 Safari 中 我以前从未见过它 它只是我使用过的常规 HTML CSS 我在互联网上环顾四周 但找不到完全相同的问题 由于高度固定 只有一些内容在

  • 表格底部的粘性滚动条

    我不确定 粘性 是否是这个术语 但是有没有办法使滚动条overflow auto保持可见 我有一个相当大的表格 我希望它可以水平滚动 但是 表格也相当高 因此当页面加载时 水平滚动条不在浏览器的视口内 因此很难判断表格是否可滚动 div s

  • $_POST 返回空

    尝试练习一下 ajax 和 PHP 我不明白为什么每当我发送一些东西时 它都会返回空或未定义的索引 PHP 返回空 JS form submit function var meth this attr action var msg msg

  • 推荐的 HTML 格式化程序脚本/实用程序？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • 如何在单页应用程序中使用 #-URL？

    本文 http danwebb net 2011 5 28 it is about the hashbangs提出了一个非常令人信服的论点 因为 URL 是长期存在的 它们被添加书签并传递 所以它们应该是有意义的 并且使用哈希进行真正的路由

  • setTimeout 用于加载下拉列表中的项目

    我在用setTimeout克服 中提到的缓慢处理脚本警告 禁用 Internet Explorer 中的长时间运行脚本消息 https stackoverflow com questions 4460263 disabling the lo

  • 重置 div 内容的 css 样式

    有一个用 css 样式定制的 html 页面 我无法更改此 css 该页面的一个标签被设计为动态 html 数据的容器 我怎样才能 重置 这个div的css设置 页面中定义的css样式对此div的内容没有影响 我只能访问动态 html 并且

  • 开放式 WebSocket 连接存在哪些安全问题？

    我正在构建一个使用 websockets 的应用程序 我只允许经过身份验证的用户在登录并被授予会话 ID 后打开与服务器的 Websocket 连接 一旦我与经过身份验证的用户打开了 Websocket 连接 当前 页面 就会保存打开的 W

  • 如何在同一个

    中设置两种不同的字体大小

    我有一段 HTML 代码 我一直坚持不下去 我怎样才能将这个文本的第一部分的字体大小设置为 20px 以及后面的文本 br 标签字体大小为 15px 或者 如果我做的完全错误 我该如何做而不将它们放在不同的标签中 p Los Santos

  • 通过 Javascript 更改 Webkit 属性？

    请帮助我 可能是因为我对 CSS 动画和 Javascript 相当陌生 但我使用的代码应该更改它的属性 当我运行代码时 它会执行代码中的所有其他操作 除了更改所需 div 的 CSS 属性 我已经尝试了所有这四种方法 但似乎都不起作用 它

  • 如何显示/隐藏jsf组件

    在我的一个 JSF 应用程序中 顶部的标题部分包含 selectOneMenu 底部的内容部分显示过滤器组件 默认情况下 应用程序首先在顶部显示 selectOneMenu 数据 在底部显示相应的 Filter 信息 如果用户选择不同的se

  • 如何获取 Spotify API 的访问令牌？

    我已经研究 Spotify api 和示例源代码几天了 但我仍然不知道如何获取访问令牌来访问用户的播放列表数据 我已经到达了拉起登录窗口 用户登录 然后收到授权码的地步 此时 我尝试做这样的事情 window open https acco

  • 为什么在缩放的 html5 画布中可以看到伪像？

    我见过this https stackoverflow com questions 7615009 disable interpolation when scaling a canvas and this https stackoverfl

  • 输入字段名称以数字开头

    我有一个输入字段 其名称是 MD5 字符串 例如

  • 将 div 附加到另一个 div 的右侧

    我有一个 div 它就像一个容器 里面有 2 个图像 一张图像位于 div 的左侧 另一张图像位于右侧 我的容器是Bootstrap的容器 它们都用 div 包裹 并且div s position is fixed 我的问题是我无法找到要附

  • 检测 html 选择框上的编程更改

    有没有办法让 HTML 选择元素在每次以编程方式更改其选择时调用函数 当使用 JavaScript 修改选择框中的当前选择时 IE 和 FF 都不会触发 onchange 此外 更改选择的 js 函数是框架的一部分 因此我无法更改它以在结束

  • 引导网格中的绘图图周围有巨大的空白

    我有一个 Net 应用程序 我试图在其中使用创建一个图表bootstrap js and plotly js 当我创建响应式图表时 我遇到网格中存在巨大空白的问题 我发现问题的一部分是plotly svg container的大小默认高度为

随机推荐

热门标签