CODEWITHSUNDEEP
htmlcss
Jonathan
Jonathan

Reputation: 3024

How to get these tables stacked on top of each other?

How do I get these tables to slide under each other without the extra space?

enter image description here

<table border="0">
    <tbody>
        <tr>
            <th>And another</th>
        </tr>
        <tr>
            <td>Some stuff in the table. </td>
        </tr>
        <tr>
            <td>Some stuff in the table. </td>
        </tr>
        <tr>
            <td>Some stuff in the table. </td>
        </tr>
    </tbody>
</table>

<table border="0">
    <tbody>
        <tr>
            <th>And another</th>
        </tr>
        <tr>
            <td>Some stuff in the table. </td>
        </tr>
        <tr>
            <td>Some stuff in the table. </td>
        </tr>
    </tbody>
</table>

<table border="0">
    <tbody>
        <tr>
            <th>And another</th>
        </tr>
        <tr>
            <td>Some stuff in the table. </td>
        </tr>
        <tr>
            <td>Some stuff in the table. </td>
        </tr>
        <tr>
            <td>Some stuff in the table. </td>
        </tr>
    </tbody>
</table>

<table border="0">
    <tbody>
        <tr>
            <th>And another</th>
        </tr>
        <tr>
            <td>Some stuff in the table. </td>
        </tr>
        <tr>
            <td>Some stuff in the table. </td>
        </tr>
        <tr>
            <td>Some stuff in the table. </td>
        </tr>
    </tbody>
</table>

CSS

/* ---------------[ Tables ]--------------- */

table {
    float: left;
    width: 285px;
    }

tr, td, th {
    margin:auto; 
    }

td, th {
    padding:5px;
    vertical-align:top;
    }

th {
    font-weight:bold;
    background:#ddd;
    }

td {
    border:1px solid #ddd;
    }

Thanks

Upvotes: 2

Views: 17289

Answers (4)

saille
saille

Reputation: 9191

table {
    display: block;
    width: 285px;
}

Upvotes: 0

zzzzBov
zzzzBov

Reputation: 179284

Unfortunately, pure floating wont do what you want it to in this case. The simplest fix is non-semantic: Wrap the left column in a div that's floated to the left, with a width of 50% or some other suitable number, and wrap the right column in a div that's floated to the right, with a width of 50% or some other suitable number.

The alternative to preserve semantics unfortunately relies on either absolute positioning (which wont work for dynamic tables) or JavaScript. jQuery Masonry is a reasonable way of aligning columns of stuff so that it all fits together nicely, but unfortunately will not work for users without JavaScript enabled.

Upvotes: 1

mu is too short
mu is too short

Reputation: 434985

You could try adding clear: left to your tables:

table {
    float: left;
    clear: left;
    width: 285px;
}

Demo: http://jsfiddle.net/ambiguous/AsUSj/

You might need to play with the panel sizes in the fiddle to convince yourself that it works.

Upvotes: 5

albert
albert

Reputation: 8153

either set width to 100% on tables or put a width on their parent element with width 285px

Upvotes: 3

Related Questions