How to place tables side by side

[rajsarv14]

Dear Team,

I am looking for some help on placing the tables side by side(parallel -- the size of the table(s) is dynamic.
The table borders should be self contained within the tables.
Thanks..

[molendijk]

table {display: inline-block}

[rajsarv14]

Place the inline-block as below but still tables come one below the other.


table, td { border-width: 1px; border-style: solid; border-collapse: collapse; padding: 10px; color: #000000; text-align: left; float: left; display: inline-block}

[Beverleyh]

Are you setting the width of each table? Try 50% each - maybe a bit less (47%?) to accommodate the extra padding. Or apply global box-sizing so that the extra padding is absorbed into the box model. * { box-sizing:border-box }

But also remove table {display: inline-block} because it adds extra whitespace and isn't needed on floated block-level elements (you're already floating the tables)

[rajsarv14]

updated the table definition as below
[icode]

table, td { border-width: 1px; border-style: solid; border-collapse: collapse; padding: 10px; color: #000000; text-align: left; float: left; box-sizing:border-box}

Also included the table width to 47% for all the tables.. but still the table goes 1 below the other.

] <table border='1' width=47% style="float: left" box-sizing:border-box>

[Beverleyh]

To be honest, this would all be much easier if you give us a link to your actual web page. The file you've provided includes a lot of server-side code which means that it needs to be cleaned-up a lot before we can focus on the pertinent HTML and CSS. I can't be bother to do that - I'm not sure that anyone else can be bothered to do that either. And thanks to those PHP variables, we can only guess at the content, which makes life even more difficult for us because the content of the cells will determine table layout, unless measures are put in place to counteract the effect of the content, but we wont know that until we can see what it is you're working with. We only need to see the served page. If you link us to a live demo life becomes much easier because we can make live edits in the browser (dev toolbar) rather than trying to mentally filter out all the XML, echo's and variables, and imagine what the table contains. The guessing process that we've gone through so far is too much effort for us. If you want help, you need to make it easier for us to give it to you.

[styxlawyer]

There are several errors in your test file above. For example the lines 84-87 read as follows:



<tr><th class='titulo' colspan='2'>Password Expiry Information </td>
<tr><th class='titulo'>Local Account Details</td>
<th class='titulo'>Expiry Date </td>
</tr>" >> $DIR/html_test.xls


You have two opening <th> tags which are closed with </td> tags. This is incorrect. You also have two opening <tr> tags but only one matching </tr> tag. It might be worth fixing the errors first.