Two Tables Side By Side in CSS

These tables were set up with responsive design for mobile devices so they will be positioned side by side in a horizontal layout and revert to a vertical layout when displayed on small mobile devices.

This table arrangement contains two tables which are both 280 pixels wide. In order for the two tables, to be centered on the page I placed them inside a Div that is a little wider than the two tables and then centered the Div on the page.

I then floated one table to the left and the other to the right within that Div which allows a little space between the two tables. Tables will naturally collapse one under the other when the space is reduced too far.

2 tables horizontal

This two table arrangement eliminates the need for having margins on left or right of each table to center them on the page and then having to take the margins back off for mobile devices in the media queries.

This design also eliminates using a third table to encase the others, which also eliminates having to use an inline element on the two tables to get them to lay beside each other. Also see instructions on how to set up multiple tables in HTML on one page.

The HTML Code for a Responsive Two Table Set Up

<div class="box650">
<table class="smalltable floatleft"> <tr><td><img src="images/imagename.jpg" alt="name"><br>image name</td><td class="exsmallfont" style="line-height:1.0; text-align:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor vestibulum malesuada. Cras volutpat a erat id porttitor. </td></tr></table>

<table class="smalltable floatleft"> <tr><td><img src="images/imagename.jpg" alt="name"><br>image name</td><td class="exsmallfont" style="line-height:1.0; text-align:left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor vestibulum malesuada. Cras volutpat a erat id porttitor. </td></tr></table>

</div>

The CSS code for 2 Horizontal Tables

table.smalltable {
border:3px solid #000;
width:17.500em; /*280px */
margin:5px;
border-collapse: collapse; }

table.smalltable td {
font-size:100%;
padding: 5px;
text-align:center;
vertical-align:top; }

table.smalltable td:nth-child(odd) {font-weight:bold; width:50%; }
table.smalltable td:nth-child(even) {font-weight:normal; width:50%;}

@media only screen and (min-width : 768px) and (max-width : 959px) and (orientation:portrait) { .smalltable {float:none; width:100%; display:block; margin:0 auto; } }

CSS Notes for Naming Your Tables, etc.

When you name the table you need to chose a name that describes this table from all others on your website. I called this one "smalltable" because it only has two table cells but you can name it anything you want (don't use numbers in the beginning of the name as it causes problems in CSS).

I removed the borders around the cells within each table by using border:collapse. I used em's for the width so the tables will shrink on small mobile devices. There is inside padding of 5px and text is centered within each cell. the td:nth-child enables one cell to have bolded text (under the flower) and not the other cell (the text), plus you can specify a different width for each cell if you want.

CSS Notes for Naming Your Divs, etc.

I label Divs that I use as containers, with a class for "boxes" but you can name it containers or wrappers or whatever you want. Being as Divs will by default take up the whole width of the page or container width you have to specify a width for them.

I center Divs by using "margin:0 auto;". I also have these divs set up so they change to (width:98%;) in media queries for small mobile devices so they almost fill up the space on small devices.

Overall CSS Notes

I always have float:left; and float:right cancelled out in media queries in CSS on all pages of my site for small devices and revert them to (float:none; width:100%; text-align:center;) so each item that used to be floated now fills the width of the space and eliminates any text floating on left or right).

These overall changes for every page on the site eliminate the need for a lot of media queries for specific classes like "two tables side by side".

Be sure and set up a class to clear both left and right floats under the tables otherwise it might mess up your layout for anything that follows this table set up.

If you are viewing this page on a desktop you can grab the lower right corner of the page and drag to the left so you can see how these tables rearrange on a tablet or small mobile device.

Red Rose

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor vestibulum malesuada. Cras volutpat a erat id porttitor.

Yellow Rose

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor vestibulum malesuada. Cras volutpat a erat id porttitor.

Return to CSS TIPS