Changing layout in table row using CSS only

Question

I have a table using jQuery datatables with some rows in it.

Per this example, the table could look something like this:

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.

Can you show approaches you have tried? – hopkins-matt Feb 23 '16 at 20:14 — hopkins-matt, Feb 23 '16 at 20:14

score 3 · Accepted Answer · edited May 23 '17 at 10:32

3

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.

edited May 23 '17 at 10:32

Community

1
1

answered Feb 23 '16 at 20:43

Michael Benjamin

346,931
104
581
701

Once again, I have tried your code on my page and for some reason, even though the TR's are not built as boxes, the TD's in them are still one next to the other. I have no idea why I'm not getting line breaks. This is how it looks like (disregard the actual code): https://jsfiddle.net/ef42942g/5/ – Digicom Feb 23 '16 at 20:51
So the code above works in the demo I provided, but doesn't work on your web page? – Michael Benjamin Feb 23 '16 at 20:53
Exactly. As I said, the only change I see is that the TD's are still displayed inline with a line break between them. Have any idea what could cause that? – Digicom Feb 23 '16 at 20:55
Without seeing all the code involved I can't say. Something seems to be overriding your new CSS. – Michael Benjamin Feb 23 '16 at 20:57
Solved it. The doctype declaration was misplaces and so the user agent stylesheet has taken over. Thank you for your help. – Digicom Feb 23 '16 at 21:26
@Digicom, glad you got the issue resolved. Just note: When the doctype declaration is omitted (or faulty) that doesn't mean the user agent stylesheet takes over. It means the browser goes into quirks mode: http://stackoverflow.com/a/32215263/3597276 – Michael Benjamin Feb 23 '16 at 21:33

score 2 · Answer 2 · answered Feb 23 '16 at 20:21

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!

answered Feb 23 '16 at 20:21

Everton Lenger

1,446
2
17
32

Your answer seems to work very well in JSFiddle, but for some reason when I'm trying to implement on my page, everything is fine except for the TD's not accepting the display block. It looks like this: https://jsfiddle.net/ef42942g/5/ – Digicom Feb 23 '16 at 20:36
Change `display: inline-block;` to `display: block;` in your tds. When you set `inline-block`, the element will be placed beside its siblings, not under. Check the [fiddle](https://jsfiddle.net/ef42942g/6/). – Everton Lenger Feb 23 '16 at 20:40
I am using display block. I used the inline block in the example just to show you how it looks when I'm using the display block. Never seen a block element that doesn't causes a line break. Also tried adding width 100%. No success. – Digicom Feb 23 '16 at 20:45
Very strange. You might have some other rule overriding this one. Try to add `!important` to this rule and check how the things go. – Everton Lenger Feb 23 '16 at 20:52
Tried that. Still no luck. I have used the console to disable any other css rule on the TD's, and still the same. Do you have any idea what could have caused that? – Digicom Feb 23 '16 at 20:57
Without see it, it's very hard to help you. Unfortunately, I cannot think of any other reason. Maybe you could put it online and share with us. – Everton Lenger Feb 23 '16 at 21:09
Solved it. The doctype declaration was misplaces and so the user agent stylesheet has taken over. Thank you for your help. – Digicom Feb 23 '16 at 21:26

volx757 · Answer 3 · 2016-02-23T20:28:33.080

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/

zer00ne · Answer 4 · 2016-02-23T21:30:32.640

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>

Changing layout in table row using CSS only

4 Answers4