在移动设备上将表显示为块元素
在手机上使用网站表格的体验可能相当差。事情往往变得有点压扁和显示信息可能是一个挑战，只是为了适应表到屏幕上。
我最近遇到了一个类似的问题，我有一个移动版桌子的设计思想。我找到的解决方案是基于CSS技巧的一些响应表设计的。我当然不是设计师，但我创造的东西为我试图解决的情况工作。
其基本思想是，在mobile上显示时，将所有表元素更改为块元素，而不是将表视为表。这意味着当在移动视图中查看表时，它将以不同的方式呈现，允许以更便于移动的模式显示。
让我们使用填充了一些数据的下表。
| Title | Published | Author | Pages |
|---|---|---|---|
| Dirk Gently's Holistic Detective Agency | 1987 | Douglas Adams | 306 |
| The Long Dark Tea-Time of the Soul | 1988 | Douglas Adams | 256 |
| The Meaning of Liff | 1983 | Douglas Adams, John Lloyd | 191 |
以及以下CSS规则。
td {
padding:1rem;
}
table tr th {
font-weight: bold;
}
table tr:nth-child(even) {
background-color: gray;
}在表格中添加少量样式可使标题变粗，并使每一行均具有灰色背景色。
添加移动CSS规则的第一步是添加媒体查询，该查询将在浏览器窗口的大小为760px时启动。在此媒体查询中，我们要做的第一件事是将所有表元素设置为在移动设备上显示为块。
@media only screen and (max-width: 760px) {
table,
table thead,
table tbody,
table th,
table td,
table tr {
display: block;
}
}下一步是从表中删除标题行。我们要做的是将标题元素注入到表的内容中，以便使它们出现在文本上方变得多余。
table thead {
display: none;
}接下来的部分是更改表的每一行，以使第一列数据浮于其他列数据之上。我们通过使用偏移量为1的nth-of-type选择器将其他列转换为行内块来实现此目的。
table tbody tr td:nth-of-type(n+1) {
display: inline-block;
}最后，由于隐藏了header元素，因此需要将标题重新插入表内容中。这是通过使用第n个选择器（选择第一个元素）和内容样式（在内容本身之前插入标头）的组合来完成的。另外，由于我们希望新的标题文本浮动在数据上方，因此我们将刚添加到块中的内容变成之前的内容。
table tbody tr td:before {
font-weight: bold;
display: block;
}
table tbody tr td:nth-of-type(1):before {
content: "Published";
}
table tbody tr td:nth-of-type(2):before {
content: "Author";
}
table tbody tr td:nth-of-type(3):before {
content: "Pages";
}内联块与内部块的组合使标题文本浮动在内容上方，并创建了列标题和数据的完美对齐。
现在，当我们将浏览器的大小调整为移动视图时，表将变为不同的结构。一切仍然正确对齐，并且内容在移动设备上更易于阅读。
此技术最适合将文本项较长的数据作为第一列的数据，因为它形成了其他数据项的漂亮标题元素。另外，最好不要在表中有太多的列，因为它看起来可能有些混乱。这样做的好处是，由于标题是位于数据上方的伪元素，因此标题将始终与文本对齐。
在这里可能需要做更多的填充和其他改进，但是我想将CSS降低到使此工作实际所需的绝对最低限度。
如果您想看到它的实际效果，那么我创建了一个Codepen，其中包含您需要复制的所有内容。