Display Rows Of A Table Side By Side

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 s

Solution 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:

<divclass="col-xs-6 col-sm-4 col-md-3"><tableclass="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/

Solution 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:

<divclass="table"><divclass="group"><divclass="table-row table-head table-head-main"><divclass="table-cell">Col 1</div><divclass="table-cell">Col 2</div></div><divclass="table-row"><divclass="table-cell">1.1</div><divclass="table-cell">1.2</div></div></div><divclass="group"><divclass="table-row table-head"><divclass="table-cell">Col 1</div><divclass="table-cell">Col 2</div></div><divclass="table-row"><divclass="table-cell">2.1</div><divclass="table-cell">2.2</div></div></div></div>

CSS CODE:

.table {
  display: table;
  width: 100%;
}

.table-row {
  display: table-row;
  width: 100%;
}

.table-headdiv {
  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/

Solution 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.