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

我有一个使用jquerydatatables的表，其中有一些行

根据本例，该表可能如下所示：

我想用CSS来改变表格行的显示方式，这样最终的结果会是这样的：（请忽略实际的代码）

保持基本的表结构非常重要。我希望更改将完全使用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>

缩略图
标题
价格
行动
标题1
100$
编辑
删除
标题1
100$
编辑
删除
标题1
100$
编辑
删除

我将感谢任何能提供的帮助

---

提前感谢。

将td元素上的显示设置为block，将tr元素上的显示设置为inline block，可以让您完成大部分工作

td { padding: 5px; 
     border-bottom: none; 
     border-right:1px solid black;
     display:block;}
tr{
    display:inline-block;
 }
 thead{
     display: none;
  }

听起来您对格式有一些特定的要求，因此我不会进一步详细介绍假设，但是从这里开始，您应该能够通过在需要的地方打开和关闭边框来获得所需的内容

---

将td元素上的显示设置为块，将tr元素上的显示设置为内联块，可以让您在大多数情况下实现这一点

td { padding: 5px; 
     border-bottom: none; 
     border-right:1px solid black;
     display:block;}
tr{
    display:inline-block;
 }
 thead{
     display: none;
  }

听起来您对格式有一些特定的要求，因此我不会进一步详细介绍假设，但是从这里开始，您应该能够通过在需要的地方打开和关闭边框来获得所需的内容

---

通过更改属性，您可以使用纯CSS实现您想要的功能

这样，假设该表的行为不再像表一样

在那之后，你只需要调整一些小细节来实现你的目标

CSS:

请在此处查看：

---

希望有帮助

通过更改属性，您可以使用纯CSS实现您想要的功能

这样，假设该表的行为不再像表一样

在那之后，你只需要调整一些小细节来实现你的目标

CSS:

请在此处查看：

---

希望有帮助

您可以使用调整布局。不需要对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;
}

---

请注意，所有主要浏览器都支持flexbox。一些最新的浏览器版本，如Safari 8和IE10，需要。要快速添加所需的所有前缀，请使用。有关浏览器兼容性的详细信息，请参见。

您可以使用调整布局。不需要对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;
}

---

请注意，所有主要浏览器都支持flexbox。一些最新的浏览器版本，如Safari 8和IE10，需要。要快速添加所需的所有前缀，请使用。更多关于浏览器兼容性的详细信息，请参见。

我看到Op希望结构保持不变，因此我不得不回到绘图板。以下是CSS更改：

• 分配<代码>显示：无至

• 将3

  tr

  设置为

  显示：内联表格

• 将所有的

  td

  to

  tr

• 制作了

  .main

  表

  90vw

  其中
• …使我很容易使3张桌子对称
• …一些边距和填充
• …与我们提供的型号相比，我的桌子相距2倍，宽10倍，高20倍

片段

thead{
显示：无；
}
桌子{
宽度：90vw；
}
tr{
显示：内联表；
外形：1px纯黑；
利润率：10px 5px；
}
运输署{
填充：10px 15px；
显示：表格行；
高度：30px；
文本对齐：居中；
}
img{
宽度：120px；
利润率：10px 15px；
}

缩略图
标题
价格
行动
标题1
100$
编辑
删除
标题1
100$
编辑
删除
标题1
100$
编辑
删除

我看到Op希望结构保持不变，所以我不得不回到绘图板上。以下是CSS更改：

• 分配<代码>显示：无至

• 将3

  tr

  设置为

  显示：内联表格

• 将所有的

  td

  to

  tr

• 制作了

  .main

  表

  90vw

  其中
• …使我很容易使3张桌子对称
• …一些边距和填充
• …与我们提供的型号相比，我的桌子相距2倍，宽10倍，高20倍

片段

thead{
显示：无；
}
桌子{
宽度：90vw；
}
tr{
显示：内联表；
外形：1px纯黑；
利润率：10px 5px；
}
运输署{
填充：10px 15px；
显示：表格行；
高度：30px；
文本对齐：居中；
}
img{
宽度：120px；
利润率：10px 15px；
}

缩略图
标题
价格
行动
标题1
100$
编辑
删除
标题1
100$
编辑
删除
标题1
100$
编辑
删除

你能展示你尝试过的方法吗？你能展示你尝试过的方法吗？你的答案在JSFIDLE中似乎很有效，但由于某种原因，当我试图在我的页面上实现时，除了TD不接受显示块之外，一切都很好。看起来