表边框折叠无法使用内联块？

Question

表边框折叠无法使用内联块？

此示例以两种不同的方式显示两个表.在第一种情况下,一张桌子在另一张桌子之上.在第二个,它们是并排的.两种情况之间的唯一区别是人们使用display: inline-block; 另外,在第一种情况下,表格<DIV>用a 分隔padding-bottom,而在第二种情况下,它们<SPAN>用a 分隔padding-right.

<HTML>
<HEAD>
   <TITLE>Title</TITLE>
   <STYLE type="text/css">
   table { border-collapse: collapse; border-style: solid; border-width: thin }
   col { border-style: dotted; border-width: thin } 
   td { padding-left: 0.05in; padding-right: 0.05in }
   </STYLE>
</HEAD>
<BODY>
   <TABLE>
   <COL><COL><COL><COL><COL><COL>
   <TR><TD>x<TD>x<TD>x<TD>x<TD>x<TD>x</TABLE>
   <DIV style="padding-bottom: 1em"></DIV>
   <TABLE>
   <COL><COL><COL><COL><COL><COL>
   <TR><TD>y<TD>y<TD>y<TD>y<TD>y<TD>y</TABLE>

   <DIV style="padding-bottom: 3em"></DIV>

   <TABLE style="display: inline-block">
   <COL><COL><COL><COL><COL><COL>
   <TR><TD>x<TD>x<TD>x<TD>x<TD>x<TD>x</TABLE>
   <SPAN style="padding-right: 3em"></SPAN>
   <TABLE style="display: inline-block">
   <COL><COL><COL><COL><COL><COL>
   <TR><TD>y<TD>y<TD>y<TD>y<TD>y<TD>y</TABLE>
</BODY>
</HTML>

Run Code Online (Sandbox Code Playgroud)

CSS2规范的17.6.2.1 说明了解决折叠边界模型中的边界冲突:

如果没有一个样式是"隐藏的"并且其中至少有一个不是"无",那么将丢弃窄边框以支持更宽的样式.如果有几个具有相同的'border-width',则按此顺序首选样式:'double','solid','dashed','dotted','ridge','outset','groove'和最低: "插页".

这似乎是在第一种情况下工作,其中实心边界胜过表格边缘周围的虚线边界.但在第二种情况下,看起来两个边界都显示出来,可能相差一个像素.

截图:

我在Chrome 37.0和IE11中都观察到了这种行为.

浏览器错误或CSS功能？有没有办法让它在inline-block案件中正常工作？

注意:消除HTML标记之间的所有空白区域没有帮助.

Answer 1

Dan*_*eld 7

对于它的价值,让它正常使用inline-table而不是inline-block

小提琴

另外,我不认为你应该设置一个表元素除了

display:table,display:inline-table(或display:none- 如有必要)

- 否则事情就会陷入困境,因为你告诉桌子不再表现得像桌子了.

@misterManSam - 这个问题与折叠边距无关.它是关于折叠边框以及如果表元素不再是CSS表,则"border-collapse"不适用的事实. (2认同)

归档时间：	11 年，1 月前
查看次数：	4191 次
最近记录：	11 年，1 月前