LWD logoLori's Web DesignLWD logo

Two Tables Side By Side

These tables will revert to a vertical layout, with responsive design, i.e., one table on top of the other table 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 another box that is a little wider than the two tables (750 px) and centered it on the page. I then floated one table to the left and the other to the right within that box which allows a little space between the two tables.

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.

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:

<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. </tr><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. </tr><tr></table>

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

The CSS:

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; } }

I'm sorry but you can't test this design on my page because I don't have my 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 however. Just copy and paste the following code into your own page and it should work.

Notes on the CSS: When you name the table you need to chose a name that describes this table from all others on your site. I called it "smalltable". 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.

I always have float:left; and float:right cancelled out in CSS on all pages on my site for media queries on 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). I also have the boxes that I utilize on all my pages set up so they change to (width:98%;) on small mobile devices so they also fill up the space on small devices.

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.


Return to CSS TIPS


Google


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

Twitter     Google+     Facebook     linked in