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

前端之家收集整理的这篇文章主要介绍了html – 表格边框折叠无法使用内联块?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
此示例以两种不同的方式显示两个表.在第一种情况下,一个表位于另一个表之上.在第二个,它们是并排的.两种情况之间的唯一区别是一个使用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 – 如有必要)

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

原文链接:https://www.f2er.com/html/225584.html

猜你在找的HTML相关文章