LWD logoLori's Web DesignLWD logo

Two Tables Side By Side in CSS


These tables were set up with responsive design 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 the two tables which are both 350 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 (750 px) 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 (like when this page is displayed on a tablet or iPhone).

This 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.

2 Tables Side by Side Horizontally

red rose
Red Rose
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor vestibulum malesuada. Cras volutpat a erat id porttitor. Nunc vehicula eros lobortis lacus lobortis sagittis quis in erat.
yellow rose
Yellow Rose
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor vestibulum malesuada. Cras volutpat a erat id porttitor. Nunc vehicula eros lobortis lacus lobortis sagittis quis in erat.

The HTML Code for a Responsive 2Table Set Up

<div class="box750">
<table class="smalltable floatleft"><!-- 350px --> <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. Nunc vehicula eros lobortis lacus lobortis sagittis quis in erat. </td></tr></table>

<table class="smalltable floatleft"><!-- 350px --> <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. Nunc vehicula eros lobortis lacus lobortis sagittis quis in erat. </td></tr></table>

</div><!-- this div closes the box750 -->

The CSS code for 2 Horizontal Tables

table.smalltable {
border:3px solid #000;
width:21.875em; /*350px */
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 Tables

When you name the table you need to chose a name that describes this table from all others on your site. 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 Divs

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 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%;) on 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.

2 tables horizontal

Testing this Table Design on a Mobile Site

I'm sorry but you can't test this design on my page for responsive designs because I don't have this site set up for mobile yet (I'm currently in the process of redesigning it, but with over 100 pages it takes a long time). It works on my mobile site that is being set up however. Just copy and paste the code into your own page and it should work.


Return to CSS TIPS




Lori Eldridge
Copyright © 1-26-18
All Rights Reserved

Twitter     Facebook