具体 table 布局

Question

我想在移动设备上制作一个自适应 table 垂直左 header 行，如下所示：

Header 1  data data data
Header 2  data data data
Header 3  data data data

正常的 table 桌面是这样的：

Header 1 Header 2 Header 3
 data     data      data
 data     data      data

有没有人知道我如何只用 CSS 和 HTML 来做到这一点（我想制作 table 这样可以很容易地通过 [=21= 添加新行]).

Answer 1

您只需将 <th> 标签放在您需要的地方即可。

<table>
<tr>
  <th>Header 1</th>
  <td>Content 1,1</td>
  <td>Content 1,2</td>
</tr>
<tr>
  <th>Header 2</th>
  <td>Content 2,1</td>
  <td>Content 2,2</td>
</tr>
<tr>
  <th>Header 3</th>
  <td>Content 3,1</td>
  <td>Content 3,2</td>
</tr></table>

fiddle: https://jsfiddle.net/daswagpanda/byxk0rt6/

Answer 2

您的布局要求需要 Javascript 代码，要么在 PHP 中检测请求是来自移动设备还是桌面设备，然后在 PHP

中呈现所需的布局

Answer 3

您可以使用媒体查询并将显示值重置为 table 元素：

table {
  table-layout:fixed;
  border-collapse:collapse;/* whatever */
}
th, td {
  width:100px;/* whatever */
  border:solid;/* See me */
}
th {
  color:#145492
}
@media all and (max-width : 640px) {
  table {
    width:100%;/* whatever needed */
  }
  tbody {
    display:table-row;/* optionnal*/
  }
  tr {
    display:table-cell;    
  }
  th, td {
    display:block;
    width:auto;/* reset width if needed */
  }
}
tr:last-of-type {
  text-align:center;
  text-shadow:1px 1px tomato;
  }

<table>
  <tr>
    <th>header</th>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <th>header</th>
    <td>data</td>
    <td>data</td>
    <td>data</td>
  </tr>
  <tr>
    <th>header</th>
    <td>test snippet</td>
    <td>in full</td>
    <td>page mode</td>
  </tr>
</table>

编辑，刚刚注意到布局是相反的。也许你可以生成你的 HTML，这样我就可以更新代码片段，无论如何，无论结构如何，方法都在那里 ;)

具体 table 布局

Specific table layout

html

css

adaptive-design

adaptive-layout

编辑，刚刚注意到布局是相反的。也许你可以生成你的 HTML，这样我就可以更新代码片段，无论如何，无论结构如何，方法都在那里 ;)

谢谢