Table Stacking

by Matthew Day

HTML

<table align="center" border="1" bordercolor="red" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
    <tr>
        <td class="pattern">
            <table border="1" bordercolor="blue" cellpadding="0" cellspacing="0">
				<tr>
                    <td>
                        <table border="1" bordercolor="orange" cellpadding="0" cellspacing="0">
                            <tr>

                                   <td class="col left" border="1" bordercolor="black">left</td>
                                    <td class="col middle" border="1" bordercolor="black">middle</td>
                                    <td class="col right" border="1" bordercolor="black">right</td> 

                            </tr>
                        </table>
                    </td>
				</tr>
			</table>
        </td>
    </tr>
    
    
    
</table>

CSS

body {
    font: 13px/21px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    color:  #415A66;
}

#headCell {
    background-color: #0093D0;
    border-bottom: 2px solid white;
    color:  white;
    text-transform: uppercase;
    font-size: .9em;
    font-weight: bold;
    padding: 8px;
}

#mainBodyTable {
    max-width: 600px;
}

td[class="pattern"] table { width: 100%; }

td[class="pattern"] .col {
    width: 100%;
    display: block;
}

/* the classes "left" "middle" and "right" aren't used in the basic stacking */


@media only screen and (min-width: 400px) {
    td[class="pattern"] .col {
        display: inline-block;
        width: 32%;
    }
}