Inline tables

by Jaganathan

HTML

<div> 
    <table class="my-table">
        <tr> 
            <td> Cell 1</td><td> Cell 2 </td><td>Cell 3 </td>
        </tr>
        <tr> 
            <td> Cell 4</td><td> Cell 5 </td><td>Cell 6 </td>
        </tr>
    </table>
    <table class="my-table">
        <tr> 
            <td> Cell 1</td><td> Cell 2 </td><td>Cell 3 </td>
        </tr>
        <tr> 
            <td> Cell 4</td><td> Cell 5 </td><td>Cell 6 </td>
        </tr>
    </table>
    <table class="my-table">
        <tr> 
            <td> Cell 1</td><td> Cell 2 </td><td>Cell 3 </td>
        </tr>
        <tr> 
            <td> Cell 4</td><td> Cell 5 </td><td>Cell 6 </td>
        </tr>
    </table>
    <table class="my-table">
        <tr> 
            <td> Cell 1</td><td> Cell 2 </td><td>Cell 3 </td>
        </tr>
        <tr> 
            <td> Cell 4</td><td> Cell 5 </td><td>Cell 6 </td>
        </tr>
    </table>
    <table class="my-table">
        <tr> 
            <td> Cell 1</td><td> Cell 2 </td><td>Cell 3 </td>
        </tr>
        <tr> 
            <td> Cell 4</td><td> Cell 5 </td><td>Cell 6 </td>
        </tr>
    </table>
    <table class="my-table">
        <tr> 
            <td> Cell 1</td><td> Cell 2 </td><td>Cell 3 </td>
        </tr>
        <tr> 
            <td> Cell 4</td><td> Cell 5 </td><td>Cell 6 </td>
        </tr>
    </table>
</div>

CSS

.my-table {
    display:inline-block;
    border: 1px solid red;
    padding: 5px;
}

.my-table:first-child {
       /* style for first table  */
}