html – 如何用CSS模拟“”？

发布时间：2020-12-14 19:36:38 所属栏目：资源来源：网络整理

导读：我正在使用ExtJS编写一个Web应用程序.我把桌子放在桌子里面,由于种种原因,不可能把它重新整理成一个带有rowspan / colspan的大桌子. “外面”表格围绕着它的单元格.我希望我的“里面”表格在它的单元格之间有边界,所以我结束了“拆分”现有(“外部”)单元格

我正在使用ExtJS编写一个Web应用程序.我把桌子放在桌子里面,由于种种原因,不可能把它重新整理成一个带有rowspan / colspan的大桌子.

“外面”表格围绕着它的单元格.我希望我的“里面”表格在它的单元格之间有边界,所以我结束了“拆分”现有(“外部”)单元格的效果.

如果它使事情更清晰,这就是我所拍摄的,像(穷人)ascii艺术：

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

(“内部”表格看起来像一个tic-tac-toe网格;“外部”表格的单元格具有不间断的边框)

我环顾四周,发现了一个< table>属性称为RULES,这听起来像这样做.然而,它似乎不太支持,反正我不应该把风格放在标记(对吗？).我发现的文档说“使用CSS”,但是我似乎找不到一种简单的方式来说“在单元格之间放置一个边界,但是如果单元格的边缘在CSS的外部触摸到外部” .帮帮我？

解决方法

这个 http://codepen.io/morewry/pen/GnBFu是我能得到的.我怀疑会有一些支持问题,并且单元格的对齐关系被边框间隔的数量所限制.

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; }

编辑

重新读取后,我意识到您没有在单个表中查找分隔的边框,而是仅限制嵌套表之间的单元格之外的边框.这更简单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支持：最后一个孩子,所以需要一些额外的帮助,IE6将需要一个解决方法：first-child和：last-child.

对于IE8和IE7,以下将模拟border：hidden

table{ border:2px solid transparent; }

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!