如何使用 CSS 模拟“”?
2024-03-27

我正在使用 ExtJS 编写一个 Web 应用程序。我将一个表放入一个表中,由于各种原因,不可能将其全部重构为具有行跨度/列跨度等的一个大表。

“外部”表格的单元格周围有边框。我希望我的“内部”表格有边框between它的细胞,所以我最终得到了“分裂”现有(“外部”)细胞的效果。

如果它让事情变得更清楚,这就是我正在拍摄的,作为(可怜的)ascii 艺术:

-----------------
|               |
|     |   |     |
|  -----------  |
|     |   |     |
|  -----------  |
|     |   |     |
|               |
-----------------

(“内部”表格看起来像井字棋网格;“外部”表格的单元格具有完整的边框)

我环顾四周,发现了一个<table>属性称为RULES,听起来好像就是这样做的。然而,它似乎没有得到很好的支持,而且无论如何我不应该在标记中添加样式(对吗?)。我找到的文档说“使用 CSS 代替”,但我似乎找不到一种简单的方法来表示“在单元格之间放置边框,但如果单元格的边缘接触表格的外部则不会” 。帮助?


This http://codepen.io/morewry/pen/GnBFu http://codepen.io/morewry/pen/GnBFu is about as close as I can get. I suspect there will be some support issues and the alignment of the cells is off by the amount of the border-spacing.

table{
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0.25em;
    border:1px solid red;
}
    tr{
        display:block;
        border-bottom:1px dashed blue;
    }
    tr:last-child{ border:0; }
        td{
            padding-right:0.25em;
            vertical-align:top;
            border:1px dotted orange;
            border-width:0 1px;
        }
        td:first-child,
        td + td{ border-left:0; }
        td:last-child{ padding-right:0; border-right:0; }

Edit

重新阅读后,我意识到您并不是在单个表格中寻找分隔的边框,而只是为了抑制嵌套表格上单元格之间的边框以外的边框。这样就简单多了http://codepen.io/morewry/pen/yxvGg http://codepen.io/morewry/pen/yxvGg:

table{
    table-layout:fixed;
    border-collapse:collapse;
    border-spacing:0;
    border-style:hidden;
}
    td{
        padding:0.25em;
        border:1px solid black;
    }

边框冲突解决方案规定 border-style:hidden 优先,因此折叠模型中唯一出现的边框位于单元格之间。

这里唯一的问题是 IE 不支持隐藏,因此对于 IE 您需要解决方法。伪类应该适用于 IE8。我认为 IE7 不支持 :last-child,因此它需要一些额外的帮助,而 IE6 则需要针对 :first-child 和 :last-child 的解决方法。

对于IE8和IE7,下面将模拟border:hidden

table{ border:2px solid transparent; }

在这些浏览器中,您会获得 2 个额外像素的透明空间,但效率更高。我记得 IE6 并不能正确支持透明边框,它仍然会有问题。看http://codepen.io/morewry/pen/bIvJa http://codepen.io/morewry/pen/bIvJa.

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

如何使用 CSS 模拟“

”? 的相关文章

随机推荐

  • PDFKit、nodeJS合并两个PDF文件

    有谁有使用 NodeJS 的 PDFKit 的经验吗 具体来说 我正在尝试将 2 个 PDF 文档合并为 1 个 但我似乎无法通过合并后的文档中的格式正确获取两个 PDF 的内容 这就是我所做的 var PDFDocument requir
  • 在 Kubernetes 上使用 Spark 写入输出时出现 chmod 错误

    我正在开发一个 POC 用于将 Spark 集群设置为使用 Kubernetes 通过 AKS Azure Kubernetes 服务 进行资源管理 我正在使用 Spark submit 以集群模式将 pyspark 应用程序提交到 k8s
  • Eclipse 编辑器显示变量出现情况

    在 Eclipse 标准安装中 如果用光标单击某个变量 编辑器会标记该变量的所有出现位置 例如将光标设置在 foo 变量上的某个位置 它也会突出显示所有其他 foo 公共无效打印字符串 字符串foo System out println f
  • Proxyquire、rewire、SandboxedModule 和 Sinon:优缺点

    在模拟 Node 依赖项时 我偶然发现了以下库 代理查询 https github com thlorenz proxyquire Rewire https github com jhnns rewire 沙盒模块 https github
  • 此 WCF 错误是什么意思:“自定义工具警告:无法导入 wsdl:portType”

    我在我的解决方案中创建了一个 WCF 服务库项目 并拥有对此的服务引用 我使用类库中的服务 因此除了类库之外 我还引用了 WPF 应用程序项目中的内容 服务设置直接 仅更改以获得异步服务功能 一切都工作正常 直到我想更新我的服务参考 它失败
  • WCF 全局 (.asax) 行为

    我想创建一个全局选项 当 REST 调用包含 format json 时 将响应输出为 JSON 字符串 如果我在方法中输入以下字符串 它就会起作用 WebOperationContext Current OutgoingResponse
  • 如何检查 Java 程序的输入/输出流是否连接到终端?

    我希望 Java 程序根据其用途具有不同的默认设置 详细程度 可能支持彩色输出 在 C 语言中 有一个 isatty 函数 如果文件描述符连接到终端 则该函数将返回 1 否则返回 0 Java 中有类似的东西吗 我没有在 JavaDoc 中
  • 将相机置于 swift spritekit 中的节点中心

    我正在用 Swift 创建一个泰拉瑞亚风格的游戏 我希望玩家节点始终位于屏幕中央 并且当您向右移动时 方块会像在泰拉瑞亚中一样向左移动 我目前正在尝试弄清楚如何保持视图以角色为中心 有谁知道实现此目标的好方法 自 iOS 9 OS X 10
  • 我可以使用“eval”在 Python 中定义函数吗? [复制]

    这个问题在这里已经有答案了 我想使用 eval 定义一个 Python 函数 func obj eval def foo a b return a b 但它返回无效语法错误 我怎样才能做到呢 顺便说一句 如何在 Python 中将函数 ob
  • 使用延迟实例化时的类型推断

    为什么在使用属性的延迟实例化时 Swift 上的类型推断不起作用 class GameView UIView private lazy var animator UIDynamicAnimator referenceView self 我收
  • ggplot2 - 带有特殊字符/符号和实际值的方面标签?

    我正在绘制一个 Rggplot2带有面的绘图facet grid and labeller label both像这样 正如你所看到的 我能够在图例中使用希腊字符 我还想在方面标签中使用希腊符号 例如 psi psi 0 1将是实际的希腊
  • 如何使用 JSF outputStylesheet 实现 CSS 缓存清除?

    在 JSF 页面模板中 我使用以下代码来包含 CSS 资源
  • 改进现有的基本 GloVe 模型

    我正在使用 GloVe 作为我研究的一部分 我已经从以下位置下载了模型here https nlp stanford edu projects glove 我一直在使用 GloVe 进行句子分类 我正在分类的句子特定于特定领域 例如某些 S
  • GWT 简单 Web 表单提交 - 重定向到新页面

    我有一个用 Google Web 工具包编写的简单 Web 表单 我希望用户在单击提交按钮时跟踪新的 URL 但是 我找不到任何从 GWT 代码中将用户重定向到新 URL 的示例 我怎样才能实现这个目标 确切的答案是 form getEle
  • Rails 3.2.6 和 authlogic 3.1.3 的会话 Nil

    在我们的生产站点上 我们使用 Rails 3 2 3 和 authlogic 3 1 0 我可以使用任何浏览器登录我们的 Rails 应用程序 我们目前正在迁移到 Rails 3 2 6 并升级以使用资产管道 因此我们还将 authlogi
  • 为什么引用静态final字段不会触发类加载?

    我有一个这样的测试代码 public class Constants public static String c1 C1 static System out println Constants Class Loaded public cl
  • 星级评定 html, css

    我确实被困在这里并且需要帮助 如何为每个按钮使用标签 有人可以帮我完成这个星级代码吗 对于每个按钮 仅使用一个 a 标签 并根据需要使用多个 span 标签 所有帮助将不胜感激 谢谢 这是我的代码 h2 text align left pa
  • Spork 在自动测试中反复重新运行失败的测试

    我有一个新项目 我正在尝试使用 rspec autotest 和 spork 启动并运行它 我在用 导轨3 0 4 rspec 2 5 0 波克0 9 0 rc3 自动测试 4 4 6 Spork 似乎加载得很好 我收到一条消息 它正在侦听
  • 有没有 JavaScript 方法可以执行 file_get_contents() ?

    这里是PHP 文档 http php net manual en function file get contents php 如果我找不到纯客户端方法来执行此操作 我将在 Ajax 调用中使用它 如下所示 homepage file ge
  • 如何使用 CSS 模拟“

”?
我正在使用 ExtJS 编写一个 Web 应用程序 我将一个表放入一个表中 由于各种原因 不可能将其全部重构为具有行跨度 列跨度等的一个大表 外部 表格的单元格周围有边框 我希望我的 内部 表格有边框between它的细胞 所以我最终得到了
Powered by Hwhale