时间戳

首页 > 解决方案 > 使 2D 表格显示为其列的 1D 表格一个接一个地用于移动设备

html - 使 2D 表格显示为其列的 1D 表格一个接一个地用于移动设备

问题描述

我是 HTML/CSS 新手，我正在开发一个网站。桌面上的一切看起来都不错，但我得到的表格对于手机来说非常大，所以它们出现了一个我想避免的滑块。我的问题如下：

给定如下表格：

A B C D

EFGH

IJKL

我希望它像这样一列又一列地出现：

一个

乙

我

乙

F

Ĵ

C

.

.

在我的 css 文件中，我仅使用以下属性，因此更改只会影响小屏幕

@media 

only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)

标签： htmlcss

解决方案

这是您可以做什么的基本示例。不确定这是否是最佳做法。


table {
  display: flex;
  flex-flow: row wrap;
  border-collapse: collapse;
  min-width: 0px;
  min-height: 0px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

tr,
tbody {
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  align-item: center; // used for example aligns items horizontally center
  justify-content: space-between; // used for example aligns items with space between
  min-width: 0px;
  min-height: 0px;
  width: 100%;
  max-width: 100%;
}

td {
  width: 100%;
  max-width: 33%;
  flex: 1 1 33%;
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  td {
    max-width: 100%;
    flex: 1 1 100%;
  }
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
    </tr>
  </tbody>
</table>

由于您是 html/css 的新手，我建议您在这里玩一下：https ://flexboxfroggy.com/ ，因为它可以解释 flex 的工作原理。

编辑：如果解决方案有效，请使用类而不是标签。

推荐阅读