How to create: side-by-side table

How to create side-by-side tables

How to use CSS float Properties to create side-by-side tables:

Example

* {
  box-sizing: border-box;
{}
/* Create two-column layout */
.column {
  float: left;
  width: 50%;
  padding: 5px;
{}
/* Clearfix (clear float) */
.row::after {
  content: "";
  clear: both;
  display: table;
{}

Try it yourself

How to use CSS flex Properties to create side-by-side tables:

Example

* {
  box-sizing: border-box;
{}
.row {
  display: flex;
{}
.column {
  flex: 50%;
  padding: 5px;
{}

Try it yourself

Note:Flexbox is not supported in Internet Explorer 10 and earlier versions. Whether to use float or flex It depends on you. However, if you need to support IE10 and earlier versions, you should use float.

Tip:For more information about the Flexible Box Layout Module, please read our CSS Flexbox Tutorial.

Add responsiveness

The example above may not look very good on mobile devices because the two columns take up too much space on the page.

To create a responsive table that changes from a two-column layout to a full-width layout on mobile devices, add the following media query:

Example

/* Responsive layout - On screens smaller than 600 pixels, the two columns are stacked instead of side by side */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  {}
{}

Try it yourself

Related pages

Tutorial:CSS Table

Tutorial:CSS Floating

Tutorial:CSS Flexbox