CODEWITHSUNDEEP
csshtml-table
Matthew Shaw
Matthew Shaw

Reputation: 145

Making an HTML Table Inline

I'm trying to put two tables side by side:

<table class="inline">
</table>
<table class="inline">
</table>

But none of the values I assign to inline's display property from inline-table to inline to inline-block work so I'm stumped and would appreciate any advice. I only found one other relevant question: How do I make an HTML table inline and unfortunately the solutions didn't work.

Upvotes: 1

Views: 8714

Answers (2)

Marc Audet
Marc Audet

Reputation: 46785

By default, tables are block level elements and you need to change the display property to get two or more tables per line, for example:

<table class="inline">
    <tr><td>First table row 1</td></tr>
    <tr><td>First table row 2</td></tr>
</table>
<table class="inline">
    <tr><td>Second table row 1</td></tr>
    <tr><td>Second table row 2</td></tr>
</table>

with the following CSS:

.inline { 
    outline: 1px solid blue;
    width: 49%;
    display: inline-block;
}

You can also use inline-table, both give the same results. If you don't set the width, each table will determine a minimum width to fit the content. If you set the width, you can make the two tables the same width, which may be desirable.

If you try display: inline, the table widths will shrink to fit the content, which may be preferable in some applications. In this case, the width setting is ignored.

I have shown the three cases in the following fiddle.

Fiddle reference: http://jsfiddle.net/audetwebdesign/m4fdG/

Upvotes: 3

Omega
Omega

Reputation: 3038

It should not be:

<table class="inline">
</table>
<table class="inline">
</table>

It should be:

<table style="display:inline">
</table>
<table style="display:inline">
</table>

Upvotes: 1

Related Questions