html - 用 css 分隔表中的 th 和 td

Question

我正在尝试使表格响应移动设备，并且我制作了 td 和 th 显示值 block ，因此它变得更好一些。唯一的问题是，标题全部堆叠在一起，数据全部堆叠在一起。我想这样做，所以首先是标题，然后是该特定行的数据，然后是下一个标题和数据，依此类推。我只想使用 CSS 来完成这项工作。下面是我刚刚复制粘贴的代码。我真的不想用 PHP 搞砸任何事情，因为我不完全理解它。这是我想要显示的内容:一个单独的 th 及其下方的数据，然后在 td 之后是下一个 th 和它的 td，依此类推。我在这个问题的摘要中将我的代码包含在一个 jsfidle 中，因为该选项卡在我的计算机上不起作用。

Answer 1

来自你的陈述

I made the td and th display value block, so that made it a little better. Only problem is, the headings are all stacked on eachother in a group, and the data is all stacked together in their own group.

添加display:block到 th和 td将使您的内容堆叠在一个单元格中，它看起来像这样:

header1
content1
content2
content3
header2
content1
content2
content3

或

header1
header2
content1
content2
content3
content1
content2
content3

I want to make it so the headings are first, then data for that specific row, then the next heading and data, and so on.

我猜你希望你的 table 是这样的:

header1 | content1 | content2 | content 3
header2 | content1 | content2 | content 3
header3 | content1 | content2 | content 3

这是 JSFiddle 中的示例

更新

从你的jsfiddle，你真的没有<tr>吗？在一张 table 上？因为<tr>是那个会分开你的 <th>来自 <td> .我添加了一个 <tr>来自你的 jsfiddle，它看起来像这样:

那是你想要的 table 吗？这是 Jsfiddle .