css positioning tables next to each other
Using the HTML/CSS below I have 3 tables. I would like table 1 and 2 to be next to each other on the "same line" with table 3 underneath but with a break between them.
However, when I use f开发者_运维百科loat:left/right on the first two tables, table 3 is ALWAYS directly underneath and "touching" tables1/2?
I have tried margin/clear/float and can't seem to make things line up :(
Any help gratefully received.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
DIV.search
{
width: 80%;
margin-right: auto;
margin-left: auto;
}
DIV.search TABLE
{
border: 1px solid black;
border-collapse: separate;
}
DIV.search TABLE.table1
{
float: left;
width: 45%;
}
DIV.search TABLE.table2
{
float: right;
width: 45%;
}
TABLE.table3
{
border: 1px solid black;
margin-top: 50px;
margin-right: auto;
margin-left: auto;
width: 80%;
}
</style>
</head>
<body>
<div class="search">
<table class="table1">
<tr>
<td>
TABLE 1
</td>
</tr>
</table>
<table class="table2">
<tr>
<td>
TABLE 2
</td>
</tr>
</table>
</div>
<table class="table3">
<tr>
<td>
TABLE 3
</td>
</tr>
</table>
</body>
</html>
I know this is a bit late but a similar solution may be to but in the css "display:inline-block" but there is also "display:inline-table". Worked for me :)
Also, an additional thing working for me was using "float:left"
See here
You should apply some additional styles:
DIV.search
{
width: 80%;
margin-right: auto;
margin-left: auto;
overflow: hidden; /* Fixing the problem in modern browsers */
zoom: 1; /* Fixing in old IE by applying hasLayout */
padding-bottom: 50px; /* I prefer padding here than margin in table3 */
}
TABLE.table3
{
border: 1px solid black;
/* margin-top: 50px; */
margin-right: auto;
margin-left: auto;
width: 80%;
}
You can try to use :after (in the answer below), but old IE doesn't support it.
加载中,请稍侯......
精彩评论