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

lyfkaqu1 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(97)

我的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

来源：https://stackoverflow.com/questions/77782515/css-to-display-table-with-one-row-per-cell-on-narrow-screens

1条答案

按热度按时间

tsm1rwdh1#

你差不多就到了。可以在<td>元素上使用data-col属性，并在:before上的CSS content中引用它们

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;
}

个字符
另一种方法是使用CSS变量来存储数据，减少重复，因此可以在较长的表上保存一些字节：

thead {
  display: none;
}

table,
tr,
td {
  display: block;
}

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

td:before {
  display: inline-block;
  width: 2em;
}

td:nth-child(1):before {
  content: var(--col1)':';
}

td:nth-child(2):before {
  content: var(--col2)':';
}

td:nth-child(3):before {
  content: var(--col3)':';
}

td:nth-child(4):before {
  content: var(--col4)':';
}

td:nth-child(5):before {
  content: var(--col5)':';
}

<table style="--col1:'A'; --col2:'B'; --col3:'C'; --col4:'D'; --col5:'E'">
  <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>

的字符串

赞(0）回复(0）举报 2024-01-09

我来回答

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

1条答案

相关问题

热门标签

最新问答