Menu
This example displays two tables in two different ways. In the first case, one table is above the other. In the second, they are side by side. The only differences between the two cases are that one uses display: inline-block; also, in the first case, the tables are separated by <DIV> with a padding-bottom, and in the second they are separated by a <SPAN> with 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>
17.6.2.1 of the CSS2 spec says about resolving border conflicts in the collapsing border model:
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'.
This seems to be working in the first case, where the solid border wins over the dotted one, around the edge of the table. But in the second case, it looks like both borders are showing up, perhaps one pixel apart.
Screenshot:
I'm observing this behavior both in Chrome 37.0 and IE11.
Browser bug, or CSS feature? Is there a way to get it to work right in the inline-block case?
Note: Eliminating all the white space between HTML tags didn't help.
653
For what it's worth, to get this to work right use inline-table instead of inline-block
FIDDLE
Also, I don't think you should ever set a table element with anything but
display:table , display:inline-table ( or display:none - if necessary)
-- otherwise things are bound to mess up because you're telling the table not to behave like a table anymore.
92
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
