CODEWITHSUNDEEP
htmlcss
OammieR
OammieR

Reputation: 2850

Table float with the container overflow:hidden

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.

http://jsfiddle.net/bULcB/3/

How can I fix that. I want the table stay at the same line.

Upvotes: 0

Views: 182

Answers (3)

Nishant Rana
Nishant Rana

Reputation: 21

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>

Upvotes: 0

Arie Xiao
Arie Xiao

Reputation: 14082

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

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41832

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).

Working Fiddle

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.

Working Fiddle

Upvotes: 1

Related Questions