I want to show two table in same line. Then I'm using float: left; Like this.
If those tables width more than the container I use overflow: hidden; to hide the surplus.
Overflow hidden working perfect but the table not stay at the same line.
How can I fix that. I want the table stay at the same line.
Add a container div to wrap the two tables. And then make its width great enough to hold the two tables in a line. The overflow part of the container will not be shown as the parent div has specified overflow: hidden;.
See updated example on jsFiddle
Give position: relative to your parent element and give position: absolute; top: 0; left: 100px; to your second child element (remove float property from second child element).
or else
Give White-space: nowrap to your parent element and give display: inline-block to your child elements instead of float: left.
Works only in latest version of browsers.
div style="width: 300px; overflow: hidden; ">
<table cellspacing="0" cellpadding="0" style="float: left; background-color:red;">
<tr>
<td>First Table</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" style="float: left; background-color:yellow;">
<tr>
<td>Second Table</td>
</tr>
</table>
