html - 仅使用 CSS 更改表格行中的布局

Question

我有一个使用 jQuery 数据表的表，其中有一些行。

根据这个例子，表格看起来像这样:

https://jsfiddle.net/ef42942g/

我想使用 CSS 更改表格行的显示方式，因此最终结果将如下所示:https://jsfiddle.net/hamx5tas/ (请忽略实际代码)

保持基本的表结构非常重要。我希望完全使用 CSS 进行更改(如果可能的话)。

我已经尝试对 tr 和 td 的 css 进行各种更改，但运气不佳。

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

如果能提供任何帮助，我将不胜感激。

提前致谢。

Answer 1

您可以使用 CSS flexbox 调整布局.无需更改 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

注意所有主流浏览器都支持 flexbox，except IE 8 & 9 .一些最新的浏览器版本，例如 Safari 8 和 IE10，需要 vendor prefixes .要快速添加所需的所有前缀，请使用 Autoprefixer . this answer 中的更多浏览器兼容性详细信息.