HTML tables next to each other

css, html, html-table

Solution

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/

Problem

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: But I want them to be placed like this: 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/

Original source