html multiple tables side by side - html

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>

Answer 1

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;
}

Answer 2

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>

Answer 3

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)

Answer 4

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>