我正在使用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.
