How TO - Side-by-side Tables

Learn how to create side-by-side tables with CSS.

How To Place Tables Side by Side

How to create side-by-side tables with the CSS float property:

Example

  * {
  box-sizing: border-box;
}

/* Create a two-column
  layout */
.column {
  float: left;
 
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
 
  content: "";
  clear: both;
  display: table;
}

How to create side-by-side tables with the CSS flex property:

Example

  * {
  box-sizing: border-box;
}

.row {
  display: flex;
}

.column {
  flex: 50%;
  padding: 5px;
}

Note: Flexbox is not supported in Internet Explorer 10 and earlier versions. It is up to you if you want to use floats or flex. However, if you need support for IE10 and down, you should use float. Tip: To learn more about the Flexible Box Layout Module, read the CSS Flexbox chapter.

Add Responsiveness

The example above will not look good on a mobile device, as two columns will take up too much space of the page. To create a responsive table, that should go from a two-column layout to a full-width layout on mobile devices, add the following media queries:

Example

  /* Responsive layout - makes the two columns stack on top of each other
  instead of next to each other on screens that are smaller than 600 px */

  @media screen and (max-width: 600px) {
  .column {
   
  width: 100%;
  }
}

Tip: Go to the CSS Tables Tutorial to learn more about how to style tables.

Tip: Go to the CSS Float Tutorial to learn more about the float property.

Tip: Go to the CSS Flexbox Tutorial to learn more about the flex property.