Home What the correct CSS styles to align these tables horizontally and make them responsive?

Questions

What the correct CSS styles to align these tables horizontally and make them responsive?

byMR

April 13, 2022

I’m pretty new to CSS and I don’t know what the correct CSS property is to move the table to the place where I want.

I already use the float: right property but the table moves to the bottom right.

Sorry for my bad English 🙂

>Solution :

Nest all three table‘s in a single parent wrapper and set it to display: flex;. You can then use justify-content: space-around; or space-between depending on your personal preference.

This get’s all tables in a line. Then you can set a width on each table. I like to do a calc width so that it always fits my desired items. I then added 1em of left and right margin so that the tables are spaced accordingly.

table‘s are hardly responsive so I would suggest incorporating some media-queries for media screens. An example to make it responsive on a media screen would be to add a media query changing the flex to flex-direction: column;.

table,
th,
td {
  border: 1px solid black;
}

.wrapper {
  display: flex;
  justify-content: space-around;
}

table {
  width: calc(100% / 3);
  margin: 0 1em;
}

@media only screen and (max-width: 800px) {
  .wrapper {
    flex-direction: column;
  }
  table {
    width: 100%;
    margin: 1em 0;
}

<div class="wrapper">
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </table>

  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </table>

  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
  </table>
</div>