html - 具体表布局

Question

我想在移动设备上制作一个带有垂直左标题行的自适应表格，如下所示：

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

像这样的桌面普通表：

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

有没有人知道我怎么能只用 CSS 和 HTML 来做到这一点（我想制作表格，这样可以很容易地通过 PHP 添加新行）。

Answer 1

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

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，所以我可以更新片段，无论如何，无论结构是什么样的，方法都在那里；）

谢谢你

Answer 2

您可以简单地将<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>

小提琴：https ://jsfiddle.net/daswagpanda/byxk0rt6/

Answer 3

您的布局要求需要 Javascript 代码，或者在 PHP 中检测请求是否来自移动或桌面，然后在 PHP 中呈现所需的布局