CODEWITHSUNDEEP
html
mHelpMe
mHelpMe

Reputation: 6668

putting two tables next to each other

I have two HTML tables that I would like to put side by side.

I have seen previous answers where they mention that you need to specify inline-block and to float it left.

Below is an example of what both my tables have. However it still shows one table beneath the other, why?

"<table style ='font-size: 10pt; float: left; display: inline-block; cellpadding='3'>"

Upvotes: 0

Views: 2165

Answers (4)

Luke
Luke

Reputation: 2400

You forgot to add ' between inline-block; and cellpading

Example:

<table style ='font-size: 10pt; float: left; display: inline-block;' cellpadding='3' border='1'>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<table style ='font-size: 10pt; float: left; display: inline-block;' cellpadding='3' border='1'>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Upvotes: 1

Farzad Yousefzadeh
Farzad Yousefzadeh

Reputation: 2561

As experience states, Do not set styles like float or display on table elements directly. This could cause unexpected behaviors especially dealing with different versions of browsers. instead use a div element as table container and set your styles on the container.

<div class="table-container"><table></table></div>
<div class="table-container"><table></table></div>

And set styles

.table-container { display: inline-block; vertical-align: top; }

Upvotes: 0

Sachin Sanchaniya
Sachin Sanchaniya

Reputation: 1044

Your Mistake Is Here...

In First Table You Have to Specify display:inline-block and in second table use float:left Just Like This...

See the code in Full View ::: 

   

    <table border="1" style="display: inline-block;">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>
    <table border=1 style="float:left;" cellpadding="3">
        <tr>
            <td>Cell content</td>
            <td>Cell content</td>
            <td>Cell content</td>
        </tr>
    </table>

<hr>

Upvotes: 1

Patrik Kreh&#225;k
Patrik Kreh&#225;k

Reputation: 2683

Don't use inline-block on the tables, since it will change its behavior (if you need rules like vertical-align). But you can use float: left; and disable that floating after. Here is the example: jsFiddle

Upvotes: 1

Related Questions