响应表设计策略

最新推荐文章于 2024-10-09 19:18:32 发布

cungui5726

最新推荐文章于 2024-10-09 19:18:32 发布

阅读量123

点赞数

文章标签： css html java bootstrap html5 ViewUI

原文链接：https://thenewcode.com/678/Responsive-Table-Design-Strategies

版权

In web development, tables are the bad party guest we just can’t make leave.

在Web开发中，餐桌是我们无法休假的坏客人。

Indispensable to the very earliest days of web design – before CSS existed, tables were the only method of laying out pages – they became annoying, then momentarily tolerable (as new methods were added to make them more accessible), and now downright obnoxious.

在Web设计的最早期时期(在CSS出现之前，表格是布局页面的唯一方法)是必不可少的，它们变得烦人，然后短暂地可以容忍(由于添加了新方法以使它们更易于访问 )，而现在却令人讨厌。

The central issue is that tables do not wrap or reorient themselves in response to changing viewport sizes. Tables can be dimensioned using percentages, but they will only collapse as far as their inner content will allow them to. If the table consists of multiple columns, sentences inside of cells are inevitably forced into long, thin, almost unreadable vertical lines of text, or are simply cut off.

中心问题是表格不会根据视口大小的变化来自动包装或重新定向。可以使用百分比来确定表的尺寸，但是它们只会在内部内容允许的范围内折叠。如果表格由多列组成，则单元格内的句子将不可避免地被迫变成长长的，细的，几乎不可读的垂直文本行，或者被简单地切掉。

There have been many suggestions as to how to make tables more responsive, none of them perfect. For the forseeable future, the issue will likely have to be dealt with on a case-by-case basis; what follows are a few strategies that you can add to your responsive toolkit.

关于如何使表更具响应性，已经有很多建议，但没有一个是完美的。在可预见的将来，该问题可能必须根据具体情况进行处理；以下是一些可以添加到响应式工具包中的策略。

Digital Rights Management Technologies: A History of Failure
Medium	DRM Scheme	Year Implemented	Year Cracked	Method
CD Audio	Key2Audio	2002	2002	Felt-tip marker
DVD	CSS	1998	1999	Software (DeCSS)
HD-DVD	AACS	2006	2007	Leaked key
Blu-Ray	HDCP, AACS, BD+	2006	2007	Various
Games	SecuROM	2007	2007	Various

数字版权管理技术：失败的历史
中	DRM方案	实施年份	今年破获	方法
CD音频	Key2Audio	2002年	2002年	毡尖笔
DVD	CSS	1998年	1999年	软件(DeCSS)
高清DVD	AACS	2006年	2007年	钥匙泄漏
蓝光	HDCP ，AACS，BD +	2006年	2007年	各种
游戏类	加密ROM	2007年	2007年	各种

制作响应表 (Making A Responsive Table)

As a text case, let’s use a table that shows the history of Digital Rights Management technologies. The markup for the table is:

作为文本案例，让我们使用一个表，该表显示数字版权管理技术的历史。该表的标记为：

<table class="respondus">
	<caption>Digital Rights Management Technologies: A History of Failure</caption>
	<tr>
		<th>Medium
		<th>Scheme
		<th class="hide"><span>Year</span> Implemented
		<th><span>Year</span> Cracked
		<th>Method
	<tr>
		<td>CD Audio
		<td>Key2Audio
		<td class="hide">2002
		<td>2002
		<td>Felt-tip marker
		…
</table>

响应选项 (Responsive Options)

With the hooks of classes and span elements in the table structure, we have gained a few more options as the browser narrows:

通过表结构中的类和span元素的钩子，随着浏览器范围的缩小，我们获得了更多选择：

At moderate screen widths, suck the air out of the table.
在适当的屏幕宽度下，将空气从桌子中吸出。

Reduce table cell padding, font-size and border-spacing with @media queries to make the table fit on smaller screens. Consider adding hyphenation to break words across lines more frequently. Add zebra striping (if necessary) to retain legibility.
使用@media查询减少表格单元格的padding ， font-size和border-spacing ，以使表格适合较小的屏幕。考虑添加连字符以更频繁地跨行打断单词。添加斑马条纹 (如有必要)以保持清晰度。
```
@media screen and (max-width: 600px) {
	table.respondus {
		border-spacing: 0;
	}
	table.respondus td, table.respondus th {
	 	padding: 0.5rem;
	 	font-size: 1rem;
	 }
}
```
To gain more space, eliminate unnecessary words.
要获得更多空间，请删除不必要的单词。

The word “Year” in the table header cells might be considered supplementary at smaller screen sizes. As they are surrounded with <span> tags, we can make those words disappear as the screen gets smaller to save even more space:
在较小的屏幕尺寸下，表标题单元格中的“年份”一词可能被视为补充。由于它们被<span>标记包围，我们可以使这些词随着屏幕变小而消失，以节省更多空间：
```
@media screen and (max-width: 550px) {
	table.respondus th span { display: none; }
}
```
At mobile screen sizes, hide table columns if you absolutely must.
在移动屏幕尺寸下，如果绝对必要，请隐藏表格列。

Less practical, but sometimes necessary, you can set a column of table data to disappear at smaller viewport widths. Very much a last-ditch recourse, as it leads one to naturally question if the data was truly required in the first place, and why we are denying it to mobile users.
不太实用，但有时有必要，您可以设置一列表格数据以在较小的视口宽度下消失。最后一个求助之路非常多，因为它自然会引起人们的疑问，即首先是否真正需要数据，以及为什么我们拒绝移动用户使用它。
```
@media screen and (max-width: 500px) {
	table.respondus .hide {
		display: none;
	}
}
```
Alternatively, use the :last-child selector to eliminate the last column from the end of the table, removing the need for any classes:
另外，使用:last-child选择器可以消除表格末尾的最后一列，从而无需使用任何类：
```
@media screen and (max-width: 600px) {
	table.respondus tr td:last-child {
		display: none;
	}
	table.respondus tr th:last-child {
		display: none;
	}
}
```
To hide more than one column with this method, use nth-child instead:
要使用此方法隐藏多个列，请改用nth-child ：
```
@media screen and (max-width: 500px) {
	table.respondus tr td:nth-child(n+3) {
		display: none;
	}
	table.respondus tr th:nth-child(n+3) {
		display: none;
	}
}
```
The CSS above will preserve the first three columns of the table at small screen sizes, while removing the others.
上面CSS将以较小的屏幕尺寸保留表格的前三列，同时删除其他列。
Go mobile-first. Make a semantically-appropriate structure appear table-like under certain conditions, collapsing back to the natural display format on smaller devices. This is a more complex solution, and one that needs to be addressed in its own article.
移动优先 。使在语义上适当的结构在某些条件下看起来像表一样，在较小的设备上折回到自然显示格式。这是一种更复杂的解决方案，需要在自己的文章中解决。