I would like to place two tables next to each other. Since I'm not a big fan of floating or using "css hacks", what approach do you suggest? Is it possible to solve without it, or am I out of luck?
Asked
Active
Viewed 111 times
0
Johan
- 35,120
- 54
- 178
- 293
-
Have you tried to set both tables to width of 50% ? – Roko C. Buljan Nov 14 '13 at 09:13
-
@RokoC.Buljan Width doesn't seem to affect a table. I believe it's because they aren't blocks. – Johan Nov 14 '13 at 09:17
-
http://jsbin.com/EbOXAqag/2/edit – Roko C. Buljan Nov 14 '13 at 09:29
1 Answers
0
Use table-cell display to get what you are looking for.
For Instance,
The HTML:
<div class="wrap">
<div class="col">ABC</div>
<div class="col">DEF</div>
</div>
The CSS:
.wrap{
width:100%;
display:table;
}
.col{
background:blue;
display:table-cell;
}
EDIT:
If you want to place tables next to each other, here is the solution.
The HTML:
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
If you want to place it vertically next to each other, below is the code.
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td><table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
</table></td>
</tr>
</table>
Hope this is what you are looking for.
Nitesh
- 15,425
- 4
- 48
- 60
-
I'm afraid not. I'm asking how to place two tables next to each other, not how to make divs behave at table cells. Thanks though – Johan Nov 14 '13 at 09:22
-
Table in a table... Well, I guess that's the closest that I'll get in IE7 – Johan Nov 14 '13 at 09:38
-