CODEWITHSUNDEEP
htmlcss
marcosh
marcosh

Reputation: 9008

Css - mantain two tables with the same width

I have two html tables, one above the other, both with width 100%, something like

<div>
    <table>table content...</table>
    <table>table content...</table>
<div>

When the page is large enough the two table have the same width. But when I restrict the page, at a certain point, one of the two tables stops shrinking and the other continues, causing the fact that the two tables don't have the same width anymore.

You can see it in action here.

Is there a way with pure css to tell the two tables to maintain the same width? What would be nice is that when the first table stops to shrink, the second stops as well.

Upvotes: 1

Views: 1472

Answers (3)

Benison Sam
Benison Sam

Reputation: 2815

Add the following to the CSS code:

.t-scroller {
    display:inline-block;
    clear:both;
}

See here in JSFiddle.

Note: This one is on the DIV level and I don't know whether you can afford that. But this should do the trick...

Try this out. Hope this helps...

Upvotes: 4

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

you can also assigned a minimum-width to the tables, that way both tables CANNOT be smaller than a certain size. So you can assign to the size of when the top table stops shrinking.

The table-layout: fixed; works, but the tables both keep shrinking until you can't see the text in each of the cells, the minimum width will keep the table cells readable

demo

in the fiddle I have updated your table class:

.table {
  width: 100%;
  min-width: 550px; //added this min-width property
  margin-bottom: 20px;
}

Upvotes: 0

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18113

Add table-layout: fixed; to the table.

Updated Fiddle.

Upvotes: 0

Related Questions