How to create: side-by-side table

How to align tables side by side

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

Eksempel

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

Prøv det selv

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

Eksempel

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

Prøv det selv

Note:Flexbox is not supported in Internet Explorer 10 and earlier versions. Should you 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:

Eksempel

/* Responsiv layout - Puts two columns in a stack instead of side by side on screens smaller than 600 pixels */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

Prøv det selv

Relaterede sider

Tutorial:CSS Table

Tutorial:CSS Floating

Tutorial:CSS Flexbox