此示例以两种不同的方式显示两个表.在第一种情况下,一个表位于另一个表之上.在第二个,它们是并排的.两种情况之间的唯一区别是一个使用display：inline-block;此外,在第一种情况下,表格由< DIV>分隔.具有填充底部,并且在第二个中它们由< SPAN>分隔开.用填充权.
<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>
CSS2规范的17.6.2.1说明了解决崩溃边界模型中的边界冲突：
If none of the styles are ‘hidden’ and at least one of them is not ‘none’,then narrow borders are discarded in favor of wider ones. If several have the same ‘border-width’ then styles are preferred in this order: ‘double’,‘solid’,‘dashed’,‘dotted’,‘ridge’,‘outset’,‘groove’,and the lowest: ‘inset’.
这似乎在第一种情况下起作用,其中实心边界在桌子边缘周围的虚线边界上获胜.但在第二种情况下,看起来两个边界都显示出来,可能相隔一个像素.
截图：
我在Chrome 37.0和IE11中都观察到了这种行为.
浏览器错误或CSS功能？有没有办法让它在内联块情况下正常工作？
注意：消除HTML标记之间的所有空白区域没有帮助.
解决方法
为了它的价值,让它正常工作使用内联表而不是内联块
另外,我认为你不应该设置任何表格元素
display：table,display：inline-table(或display：none – 如有必要)
– 否则事情就会陷入困境,因为你告诉桌子不再表现得像桌子了.
