Changing layout in table row using CSS only

digicom Published at Dev

Digicom

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.

Michael Benjamin

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.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-25

Comments

0 comments

From Dev

Related Related

Article

Changing layout in table row using CSS only

Changing layout in table row using CSS only

Changing the color of a clicked table row using jQuery

Razor changing table css

hiding part of table using javascript without changing the table layout

Changing the css of table rows?

HTML CSS Table layout

How to I apply a style to only the first row (matching a class) of a table using pure css?

Changing visibility of the div element using only CSS

CSS table based layout row is not extending 100% width

Changing the CSS of Table Row OnClick

Changing Table font in CSS

highlighting all rowspans within a table row using CSS only

Set column width in table with CSS without using <col> or changing the HTML

Changing the table row based on a condition

Row cannot add dynamically using code to Table Layout in Android

Change layout of elements using CSS without changing HTML

Responsive CSS table layout make one cell act like a row

Change table row layout with css

Layout divs either with wrapping or side by side using CSS only

How to create masonry layout using css only?

Targeting specific class inside table with ID using CSS - Changing ROW background

Changing form layout with CSS

Changing the CSS of Table Row OnClick

Changing Table font in CSS

Table CSS Styling (layout)

Table breaks after remove row using css

CSS only grid layout

Table row is higher than specified with CSS (only iPhone)

Highlighting a table row when using css hover

Changing table row borders query