How TO - Side-by-side Tables
Learn how to create side-by-side tables with CSS.
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
| Firstname | Lastname | Age |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| John | Doe | 80 |
How To Place Tables Side by Side
How to create side-by-side tables with the CSSfloat 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 CSSflex 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 our 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
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Tip: Go to ourCSS Tables Tutorial to learn more about how to style tables.
Tip: Go to ourCSS Float Tutorial to learn more about the float property.
Tip: Go to ourCSS Flexbox Tutorial to learn more about the flex property.
