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

发布时间：2020-12-14 18:41:28 所属栏目：资源来源：网络整理

导读：此示例以两种不同的方式显示两个表.在第一种情况下,一个表位于另一个表之上.在第二个,它们是并排的.两种情况之间的唯一区别是一个使用display：inline-block;此外,在第一种情况下,表格由 DIV分隔.具有填充底部,并且在第二个中它们由 SPAN分隔开.用填充权. HT

此示例以两种不同的方式显示两个表.在第一种情况下,一个表位于另一个表之上.在第二个,它们是并排的.两种情况之间的唯一区别是一个使用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标记之间的所有空白区域没有帮助.

解决方法

为了它的价值,让它正常工作使用内联表而不是内联块

FIDDLE

另外,我认为你不应该设置任何表格元素

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

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

（编辑：李大同）

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