Changing layout in table row using CSS only - html

Question

I have a table using jQuery datatables with some rows in it.
Per this example, the table could look something like this:
https://jsfiddle.net/ef42942g/
I want to use CSS to change the way the table rows are shown so the final result will look something like this: https://jsfiddle.net/hamx5tas/ (please ignore the actual code)
It's very important to keep the basic table structure. I want that the change will be made entirely using CSS (if at all possible).
I have tried various changes to the tr's and td's css but with not much luck.
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Thumbnail</th>
<th>Title</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
</tbody>
</table>
I will appreciate any help that can be handed.
Thanks in advance.

Answer 1

You can adjust the layout using CSS flexbox. No changes necessary to the HTML.
CSS
thead > tr { display: none; }
tbody { display: flex; }
tbody > tr {
display: flex;
flex-direction: column;
align-items: center;
margin: 5px;
border: 1px solid black;
}
tbody > tr > td {
display: flex;
justify-content: center;
align-items: flex-start;
padding: 5px;
}
tbody > tr > td img {
width: 100px;
height: 65px;
}
tbody > tr > td:last-child {
flex-direction: row;
}
tbody > tr > td:last-child button {
margin: 5px;
}
Revised Demo
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More browser compatibility details in this answer.

Answer 2

You can achieve what you want with pure CSS, changing the display property.
In this way, let's say that the table will not behave like a table anymore.
After that, you just have to adjust minor details to achieve your goal.
CSS:
tr {
width: 120px;
display: inline-block;
padding: 5px;
border: 1px solid black;
margin-right: 20px;
}
td {
padding: 5px;
display: block;
text-align: center;
}
Check it here: JSFiddle.
Hope it helps!

Answer 3

Setting the display on the td elements to block, and the display on the tr elements to inline-block gets you most of the way there.
td { padding: 5px;
border-bottom: none;
border-right:1px solid black;
display:block;}
tr{
display:inline-block;
}
thead{
display: none;
}
It sounds like you have some specific requirements for the format, so I won't go into further detail on assumptions, but from here you should be able to get what you want by turning borders on and off where needed.
https://jsfiddle.net/ef42942g/3/

Answer 4

I saw that Op wanted the structure unaltered so I had to go back to the drawing board. The following are the CSS changes:
Assigned display: none; to <thead>
Made the 3 tr into display: inline-table
Made all of the td to tr
Made the .main table 90vw which...
...made it easy for me to get the 3 tables symmetrical...
...some margins and padding...
...compared to the model we were provided, my table are 2px further apart, 10px wider, and 20px taller.
Fiddle
Snippet
thead {
display: none;
}
table {
width: 90vw;
}
tr {
display: inline-table;
outline: 1px solid black;
margin: 10px 5px;
}
td {
padding: 10px 15px;
display: table-row;
height: 30px;
text-align: center;
}
img {
width: 120px;
margin: 10px 15px;
}
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Thumbnail</th>
<th>Title</th>
<th>Price</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
<tr>
<td>
<img src="http://www.cmacgm-marcopolo.com/wp-content/uploads/2013/01/vignette-cargo-carnet-pratique-zeebrugge.jpg" width="100">
</td>
<td>Title 1</td>
<td>100$</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
</tr>
</tbody>
</table>