CODEWITHSUNDEEP
htmlcsshtml-table
Pinguin895
Pinguin895

Reputation: 1011

HTML tables next to each other

I am trying to place many tables next to each other. At the moment I am using float:left and a fixed width, but the tables get placed like this:

Wrong positions

But I want them to be placed like this:

Right positions

Is this even possible without JavaScript? And if it is, how do I have to do it?

EDIT:

I am not using tables, because I do not know how many columns I have. On large screens I want to have more than on small ones. Some demo-code can be found here: http://jsfiddle.net/9M4jn/

Upvotes: 4

Views: 5327

Answers (4)

msturdy
msturdy

Reputation: 10794

wrap a div around your tables, give it a width, and then give your tables the CSS property display: inline-block;

CSS

div.tables table {
    width:100px;
    display: inline-block;
    vertical-align:top;
}
div.tables {
    width:500px;
}

HTML

<div class="tables">
    <table>
        <thead>
            <tr>
                <th>col 1</th>
                <th>col 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
            </tr>
            <tr>
                <td>data 1</td>
                <td>data 2</td>
            </tr>
        </tbody>
    </table>

    <!-- snip............. -->

</div>

updated jsfiddle: http://jsfiddle.net/j85Y9/2/

Upvotes: 2

Gaurav
Gaurav

Reputation: 1294

As i can see you want every 4th table in new row. For this, add a "clear" after every 3rd table.

<div style="clear:both;"></div>

Upvotes: 0

Gilles Dejeneffe
Gilles Dejeneffe

Reputation: 1

Place your tables inside a Table like this :

<table>
 <tr>
  <td>#TABLES1#</td>
  <td>#TABLES2#</td>
  <td>#TABLES3#</td>
 </tr>
 <tr>
  <td>#TABLES3#</td>
  <td>#TABLES4#</td>
  <td>#TABLES6#</td>
 </tr>
 ...
</table>

Upvotes: 0

Quentin
Quentin

Reputation: 944455

Use flexbox

For example:

<!DOCTYPE HTML>
<title>Test</title>
<style>
body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
    }

table {
    border: solid black 1px;
    margin: 10px auto;
    width: 30%;
    order: 0;
    flex: 0 1 auto;
    align-self: auto;
    }

</style>

<!-- horrible placeholder data, hopefully the real tables have semantic markup -->
<table><tr><td>1</td></tr></table>
<table><tr><td>2<br>2</td></tr></table>
<table><tr><td>3<br>3<br>3</td></tr></table>
<table><tr><td>4<br>4</td></tr></table>
<table><tr><td>5</td></tr></table>
<table><tr><td>6<br>5<br>5</td></tr></table>
<table><tr><td>7</td></tr></table>

(Note, example does not contain compatibility hacks for older browsers. See the link for guidance on that)

Upvotes: 2

Related Questions