Display rows of a table side by side - html

Question

I have one table with two columns and e.g 24 rows (loaded from a database, so its a dynamic table). Now I want the table rows displayed side by side automatically (as it fits the screen), e.g. the left part holds 12 rows and the right part holds 12 rows, or (if the screen is wide enough) e.g. three columns with 8 rows and so on.
Is that possible with html/css?
Example:
This would display the table normally:
<table>
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead>
<tbody>
<tr><td>1.1</td><td>1.2</td></tr>
<tr><td>2.1</td><td>2.2</td></tr>
</tbody>
</table>
This is what I want to have (the number of parts of the table placed side by side depends on screen size and table size):
<table style="float: left;">
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead>
<tbody>
<tr><td>1.1</td><td>1.2</td></tr>
</tbody>
</table>
<table style="float: right;">
<thead><tr><th>Col 1</th><th>Col 2</th></tr></thead>
<tbody>
<tr><td>2.1</td><td>2.2</td></tr>
</tbody>
</table>

Answer 1

Short answer: If you need something responsive it will be a little harder with just tables. I suggest using bootstrap + tables.
So each table will look like this:
<div class="col-xs-6 col-sm-4 col-md-3">
<table class="blue">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
</tr>
</tbody>
</table>
</div>
Here is a live example: https://jsfiddle.net/xwazzo/7x0v9hL6/
Note that you will need a big screen to see the responsive on jsfiddle.
Long answer:
If you want responsive tables, there is a great article about that in CSS Tricks
https://css-tricks.com/accessible-simple-responsive-tables/

Answer 2

If you have the ability to use divs instead of table elements, then I would suggest writing the whole thing out using divs and use css to make the divs act like a table. I write a mobile first approach, so I coded it to look like a standard table on mobile, then as you increase in screen size you get the look you want. Obviously you'd play with break points and adjust how wide each "group" is for each screen size to get the appropriate number of columns you want. Unfortunately, you have to repeat your table headers at every point, it's just unavoidable doing what you are looking to do... however you can hide them on mobile.
HINT: shrink the screen on the fiddle to see a "mobile" version of the table... expand it to see a larger one. There's only two sizes for demo. Add as many as you'd like.
HTML MARKUP:
<div class="table">
<div class="group">
<div class="table-row table-head table-head-main">
<div class="table-cell">Col 1</div>
<div class="table-cell">Col 2</div>
</div>
<div class="table-row">
<div class="table-cell">1.1</div>
<div class="table-cell">1.2</div>
</div>
</div>
<div class="group">
<div class="table-row table-head">
<div class="table-cell">Col 1</div>
<div class="table-cell">Col 2</div>
</div>
<div class="table-row">
<div class="table-cell">2.1</div>
<div class="table-cell">2.2</div>
</div>
</div>
</div>
CSS CODE:
.table {
display: table;
width: 100%;
}
.table-row {
display: table-row;
width: 100%;
}
.table-head div {
background: #cccccc;
}
.table-cell {
display: table-cell;
border: 1px dotted #000000;
}
.table-head {
display: none;
}
.table-head-main {
display: table-row;
}
.group {
display: table-row-group;
}
#media (min-width: 600px) {
.table-head {
display: table-row;
}
.group {
display: table;
float: left;
width: 50%;
}
}
https://jsfiddle.net/5s3cz15t/1/

Answer 3

What you want to do should not be possible with standard html tables without fundamentally breaking how tables work (and I'm not even sure if you could modify the CSS in a way that would get you your desired outcome).
As suggested by #Daniel C you might want to consider using divs instead of tables.
In cooperation with a responsive grid layout like those Bootstrap or Foundation offer, what you'd like to do should be possible.