Question

我正在尝试为移动设备制作响应表，并且我制作了第t和第t个显示值块，以便使它更好一些。唯一的问题是，标题全部堆叠在一起，并且数据全部堆叠在一起。我想这样做首先是标题，然后是特定行的数据，然后是下一个标题和数据，依此类推。我想只使用CSS完成这项工作。下面是我刚刚复制和粘贴的代码。我真的不想弄乱PHP的任何东西，因为不完全理解它。他就是我想要展示的东西：一个单独的数据与它下面的数据，然后是td下一个th和它的td，依此类推。我将此代码包含在此问题摘要中的jsfidle中，因为该选项卡无法在我的计算机上运行。

Answer 1

来自你的陈述

我制作了第t和第t个显示值块，这样做得更好一些。唯一的问题是，标题全部堆叠在一起，并且数据全部堆叠在一起。

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

header1
content1
content2
content3
header2
content1
content2
content3

或

header1
header2
content1
content2
content3
content1
content2
content3

我想这样做首先是标题，然后是该特定行的数据，然后是下一个标题和数据，依此类推。

我猜你想让你的桌子像这样：

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

以下是 JSFiddle

中的示例

<强>更新

从你的jsfiddle，你真的没有表<tr>吗？因为<tr>会将<th>与<td>分开。我从你的jsfiddle中添加了<tr>，它看起来像这样：

那是你想要的桌子吗？这是 Jsfiddle 。

Answer 2

首先，您可以将表格标题单元格放在thead元素中，将其他表格单元格放在tbody中。在th thead td的所有tbody之前，您可以复制并添加tr的{{1}}。对不起，说清楚并不容易。这是一个例子

<table>
        <thead>
            <tr>
                <th>header1</th>
                <th>header2</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th>header1</th><!-- as in the thead -->
                <td>Content1</td>
                <td>Content2</td>
            </tr>
            <tr>
                <th>header2</th><!-- as in the thead -->
                <td>Content1</td>
                <td>Content2</td>
            </tr>
        </tbody>
    </table>

在CSS中，当您使用移动设备时，您应隐藏thead并仅显示tbody th。在平板电脑/台式机中你可以反过来。

<style>
     /* Mobile first */
     table,
     thead,
     tbody,
     tr,
     th,
     td {
         display:block;
     }

     th,
     td {
         text-align:left;
     }

     th {
         background:#f00;
     }

     td {
         background:#0099ff;
     }

     thead {
         display:none;
     }

     tr {
         margin-bottom:16px;
     }

     /* When you going up 768px */
     @media screen and (min-width:768px) {
         table {
             border:2px solid #000;
             display:table;
             width:100%;
         }

         tr {
             display:table-row;
         }

         td,
         th {
             display:table-cell;                 
         }

         thead,
         tbody {
             display:table-header-group;
         }

         tbody th {
             display:none;
         }             
     }
    </style>

小提琴：https://jsfiddle.net/uc8q0u96/。

在td的{{1}}的所有tbody tr上创建数据属性并放置相应标题单元格的内容可能更清晰：

<table>
        <thead>
            <tr>
                <th>header1</th>
                <th>header2</th>
            </tr>
        </thead>

        <tbody>
            <tr>                    
                <td data-header="header1">Content1</td>
                <td>Content2</td>
            </tr>
            <tr>                    
                <td data-header="header2">Content1</td>
                <td>Content2</td>
            </tr>
        </tbody>
    </table>

使用::before伪元素获取CSS中data-header属性的内容：

/* Mobile first */
     table,
     thead,
     tbody,
     tr,
     th,
     td {
         display:block;
     }

     td[data-header]:before {
         background:yellowgreen;
         content:attr(data-header);
         display:block;
     }

     th,
     td {
         text-align:left;
     }

     th {
         background:#f00;
     }

     td {
         background:#0099ff;
     }

     thead {
         display:none;
     }

     tr {
         margin-bottom:16px;
     }

     /* When you going up 768px */
     @media screen and (min-width:768px) {
         table {
             border:2px solid #000;
             display:table;
             width:100%;
         }

         tr {
             display:table-row;
         }

         td,
         th {
             display:table-cell;                 
         }

         thead,
         tbody {
             display:table-header-group;
         }

         td[data-header]:before {
             display:none;
         }
     }

小提琴https://jsfiddle.net/o9mtfsdL/3。

瞧。

用css分隔th和td在表中

2 个答案: