CSS 在窄屏幕上显示每个单元格一行的表格

问题描述 投票：0回答：1

我的 HTML 看起来有点像这样

<html><body><table>
  <thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead>
  <tbody>
    <tr><td>1A</td><td>1B</td><td>1C</td><td>1D</td><td>1E</td></tr>
    <tr><td>2A</td><td>2B</td><td>2C</td><td>2D</td><td>2E</td></tr>
    <tr><td>3A</td><td>3B</td><td>3C</td><td>3D</td><td>3E</td></tr>
  </tbody>
</table></body></html>

每一行代表一个对象，列是它的属性。实际上，单元格值相当长——有时甚至有 20-30 个字符长。它在大多数设备上渲染良好，但在较小的手机上可能会出现问题。我知道我可以在狭窄的设备上抑制某些列，但在这个特定的情况下感觉不太好。目前我的桌子上有 

x-overflow: scroll
，但我更希望有一些 CSS 可以使表格在窄设备上呈现得更像这样：

A: 1A
B: 1B
C: 1C
D: 1D
E: 1E
-----
A: 2A
B: 2B
C: 2C
D: 2D
E: 2E
-----
(etc)

我了解如何测试设备宽度，因此出于这个问题的目的，我们假设我想无条件地执行此操作。稍微更改一下 HTML 标记就可以了，例如添加额外的类或属性，尽管我想使用 

<table>
元素来保留它，每个逻辑行有一个 
<tr>
。这是为了向后兼容，因为我知道有相当多的用户会抓取该网站（尽管存在更简洁的 API）。由于内部政治，如果可能的话，我宁愿避免需要 Javascript 的解决方案（并且无论如何，如果需要，我知道如何编写 JS 解决方案）。

我可以做到这一点，但我不知道如何从这里硬编码为“X”的字段名称开始：

  thead { display: none; }
  table, tr, td { display: block; }
  tr + tr { border-top: thin solid black; }
  td::before { content: "X:"; display: inline-block; width: 2em; }

我见过很多网站都在做这种事情，但目前我正在努力寻找一个在 CSS 中做这件事的网站。看起来这应该是一个常见问题，但我很难知道要搜索哪些术语，因此可能会在这里或其他地方错过一些很好的解释。

css css-tables
1个回答
0
投票

你就快到了。可能会使用例如

data-col
元素上的 
<td>
属性并在 CSS 中引用它们 
content
 上的
:before

thead {
  display: none;
}

table,
tr,
td {
  display: block;
}

tr+tr {
  border-top: thin solid black;
}

td::before {
  content: attr(data-col)':';
  display: inline-block;
  width: 2em;
}
<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-col="A">1A</td>
      <td data-col="B">1B</td>
      <td data-col="C">1C</td>
      <td data-col="D">1D</td>
      <td data-col="E">1E</td>
    </tr>
    <tr>
      <td data-col="A">2A</td>
      <td data-col="B">2B</td>
      <td data-col="C">2C</td>
      <td data-col="D">2D</td>
      <td data-col="E">2E</td>
    </tr>
    <tr>
      <td data-col="A">3A</td>
      <td data-col="B">3B</td>
      <td data-col="C">3C</td>
      <td data-col="D">3D</td>
      <td data-col="E">3E</td>
    </tr>
  </tbody>
</table>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.