html multiple tables side by side

Question

I have six tables side by side. Each table contains a top cell with a header and the next cell with varying amount of text. Each table is set to 30% width and has padding of 10px. The tables are enclosed in an overall <div> and each table is set float: left. On a laptop screen these will normally align 3 tables in the top of the screen and then 3 tables underneath.

[1][2][3]  
[4][5][6]

However on some browsers or other devices, the text will occupy more space in table 1 making the table longer. This results in table 4 sorting under table 2 rather than under table 1, e.g.

[1][2][3]  
   [4][5]  
[6]

Is there some way whereby I can get them to line up sequentially always taking up the left most space first?

Code example:

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

table {
  float: left;
  width: 30%;
  margin: 10px;
}

<div>

  <table>
    <tbody>
      <tr>
        <td>Title 1</td>
        <td>Text text text text text text text text Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 2</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 3</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 4</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 5</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 6</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

</div>

Hello Chris, welcome to SO. Please show some code of what you already tried and check out these pages: [How to ask](http://stackoverflow.com/help/how-to-ask) / [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve) — Sven Rojek, Jan 29 '16 at 14:10
You should be using a responsive grid for layout rather than supertables. — isherwood, Jan 29 '16 at 14:17
I can't reproduce your problem. So please take my jsfiddle as basic and show the behavior you're experiencing (also add a jsfiddle to your question): https://jsfiddle.net/o8868hmk/4/ — Julian, Jan 29 '16 at 14:23

score 2 · Answer 1 · answered Jan 29 '16 at 14:45

Based on the link you've provided, this is not the place to be using tables, but rather div elements with css markup.

Some will say Flexbox is the way to go, and it may be.

An alternative is to use div elements that are set to display: table-cell, but those have their own issues, and wouldn't be my recommendation for this layout.

The solution I'm offering refactors your code to div elements, with some features that ensure it will always look good at various widths (allowing it to "flex" at responsive sizes).

See the Fiddle Here - stretch the widths, you'll see that the boxes widths are constrained, and they move up and down to adjust.

Here's the markup:

<div class="container">
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
</div>

There's one fundamental weakness to this layout, and that is that the height of each element is not automatic / guaranteed to be the same (you have the same flaw currently in your table layout, FYI). (Flexbox fixes that flaw). To overcome it, you have to do two things:

Be sure your images are all exactly the same proportions (not size, proportion).
Apply a fixed height to the text container.

And here's the commented CSS, with notes about why each (interesting) declaration is used.

.container > div {
  /* block properties become available, but only takes the designated width */
  display: inline-block;
  /* this tells it to include padding & borders when calculating width */
  box-sizing: border-box;
  width: 30%;
  padding: 15px;
  /* min / max width ensure it's always within a "reasonable" width window.  
  This means at responsive it can / will reduce to 2 side-by-side, 
  and at larger sizes would increase to 3 or 4 side-by-side */
  max-width: 250px;
  min-width: 200px;
}

.container > div img {
  /* ensure the image takes the full width of the space */
  width: 100%;
  /* this ensures the image is always proportioned properly */
  height: auto;
}

.container div.text {
  /* this is the weakness of this layout.  To get all the boxes to be the same height, you have to set this to a fixed height. */
  height: 200px;
}

Hi Chris - glad I could help. If you find an answer on StackOverflow helpful, it's good form to upvote (click the gray arrow above the score on the left). If it's "the answer" to your question, it's good form to "accept" (click the gray checkmark below the score on the left). Cheers! — random_user_name, Jan 29 '16 at 14:59

TarranJones · Answer 2 · 2016-01-29T15:05:04.500

use inline-block instead of float. I don't recommend changing the tables display property either as it might have unwanted affects of the layout but you could wrap the tables in a div and add the style to them.

table,
td {
  border: 1px solid black;
}
table {
  width: 100%;
}
div.wrap {
  width: 30%;
  display: inline-block;
  margin: 10px;
}

<div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 1</td>
          <td>Text text text text text text text text Text text text text text text text text Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 2</td>
          <td>Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 3</td>
          <td>Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 4</td>
          <td>Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 5</td>
          <td>Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 6</td>
          <td>Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Tables for layout? That's not a good plan: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html?rq=1 — random_user_name, Jan 29 '16 at 15:18
@cale_b, you seem to have commented in the wrong place. you're right though, using tables for your layout is only ever a good idea if you are designing an email. — TarranJones, Jan 29 '16 at 15:31

score 0 · Answer 3 · answered Jan 29 '16 at 14:22

0

What you need is vertical-align: top along with display: inline-block.

Here is a fiddle with an example: https://jsfiddle.net/ocv2y1t7/

PS: Make sure you don't apply any floats to your tables (or set float: none if inherited)

answered Jan 29 '16 at 14:22

tkounenis

665
4
18

How does this solve the uneven width part of OP question? – random_user_name Jan 29 '16 at 14:23
see example at weavingtheworld.co.uk/test2.html – Chris Johnson Jan 29 '16 at 14:23
As isherwood indicated, you should not use tables to define your layout. @cale_b: When I posted the answer there was no code or links provided. – tkounenis Jan 29 '16 at 14:26

score 0 · Answer 4 · answered Feb 03 '16 at 14:42

One solution the other answers haven't mentioned is to clear the floats every third table. Since the tables are 1/3 of the window in width, this will create "rows" of three tables each.

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

table {
  float: left;
  width: 30%;
  margin: 10px;
}

table:nth-child(3n+1) {
  clear:left;
}

<div>

  <table>
    <tbody>
      <tr>
        <td>Title 1</td>
        <td>Text text text text text text text text Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 2</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 3</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 4</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 5</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 6</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

</div>

html multiple tables side by side

4 Answers4