This example displays two tables in two different ways. In the first case, one table is higher than another. Secondly, they are side by side. The only differences between the two cases are that display: inline-block ; also in the first case, the tables are separated by <DIV> into padding-bottom , and in the second they are separated by the <SPAN> symbol with 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 CSS2 spec talks about resolving border conflicts in a contraction border model:
If none of the styles is “hidden” and at least one of them is not “no,” then narrow borders are discarded in favor of wider ones. If several have the same “width border”, then styles are preferable in this order: “double”, “solid”, “dashed”, “dashed”, “comb”, “start”, “groove” and the lowest: 'insert'.
This seems to work in the first case, when a solid border wins over the dotted line around the edge of the table. But in the second case, it seems that both borders appear, possibly at the distance of one pixel from each other.
Screenshot:
I observe this behavior in both Chrome 37.0 and IE11.
Browser error or CSS function? Is there any way to make it work in case of inline-block ?
Note. Bridging the gap between HTML tags did not help.
html css html-table
ajb
source share