表格在网页中常常使用,在过去,表格的尺寸只要适合于普通的计算机屏幕即可。但在现在,表格还必须适应于各种小型手持设备和便携设备,比如平板电脑,再比如智能手机。

本文的所有代码均来自于http://css-tricks.com/responsive-data-tables/,如果您对其中的任何技术细节存在疑问,请以原文为准。

2011年所流行的一个网页设计领域词汇,叫做“Responsive Web Design”,翻译有很多,比如“适应性网页设计”或者“自适应网页设计”。这是因为随着智能手机和平板电脑的流行,访问网页的设备尺寸变得越来越难以捉摸,一个统一的网页元素尺寸,已经无法适应于如此繁多的屏幕尺寸了。

在这个问题上,绝大多数网页元素已经由设备的浏览器负责调整,比如按钮、单选框等等,但诸如表格这样的网页元素,浏览器并不能够自适应,因其所承载的信息较为复杂,人工智能还不足以决断。
两种并不好的表格显示效果

幸运的是,我们还有 CSS @media 这一手端进行手工调整。

HTML

First Name Last Name Job Title
James Matman Chief Sandwich Eater
The Tick Crimefighter Sorta

在HTML上,我们并没有什么魔术,这是一个非常普通的表格代码。

适用于大屏幕的CSS

/*
适用于大屏幕的CSS设置
*/
table {
	width: 100%;
	border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
	background: #eee;
}
th {
	background: #333;
	color: white;
	font-weight: bold;
}
td, th {
	padding: 6px;
	border: 1px solid #ccc;
	text-align: left;
}

唔,到这儿我们还是没有什么绝招,好戏在后面呢。

为小型设备定制的CSS

/*
针对屏幕宽度小于760px的设备专门优化的CSS
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* 拆解掉原先的表格样式 */
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/* 隐藏表头 */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

	tr { border: 1px solid #ccc; }

	td {
		/* 模拟行的显示 */
		border: none;
		border-bottom: 1px solid #eee;
		position: relative;
		padding-left: 50%;
	}

	td:before {
		/* 模拟表头 */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}

	/*
	其它表格信息
	*/
	td:nth-of-type(1):before { content: "First Name"; }
	td:nth-of-type(2):before { content: "Last Name"; }
	td:nth-of-type(3):before { content: "Job Title"; }
	td:nth-of-type(4):before { content: "Favorite Color"; }
	td:nth-of-type(5):before { content: "Wars of Trek?"; }
	td:nth-of-type(6):before { content: "Porn Name"; }
	td:nth-of-type(7):before { content: "Date of Birth"; }
	td:nth-of-type(8):before { content: "Dream Vacation City"; }
	td:nth-of-type(9):before { content: "GPA"; }
	td:nth-of-type(10):before { content: "Arbitrary Data"; }
}

这里的CSS是专为小型设备而定制的,将原先的表格分拆,仅仅变换为两列以适应屏幕。这当中一个重要的技巧,就是把表格的原有样式必须打破,使其以块模型来显示,籍此避免掉水平的滚动(因为原先的表格样式是不会自动弯折换行的)。

最终效果

IE怎么办

令人头疼的IE又出现了。这次的问题在于,IE(包括IE 9和IE 10预览版)自身并不支持将表格的样式转化为块模型,即display:block不起作用。

不过IE 9和10都支持CSS @media,因此我们需要对IE进行一下特殊处理:




然而,老版本的IE不支持CSS @media,我们只能借助其它的JavaScript补偿脚本来实现了,比如css3-mediaqueries-js

更好的方案?

除了本文所描述的方案之外,针对表格在小型设备上的显示,是否还有更好的解决方案呢?答案是不一定。表格本身并不复杂,但不同的数据的“关键点”并不相同,一个对A表格有效的方案,或许对B表格并不合适。所以,在这个问题上,我们需要网页开发者对自己的网页内容有足够的认识,以根据不同的情况采用不同的方案来调整。

其它方案之一:使用图表替换

其它方案之二:单页表格

About liuyanghejerry

富有激情的前端工程师,专注GUI开发。

One Thought on “通过 CSS @media 制作感知屏幕尺寸的表格

  1. Pingback: 通过 CSS @MEDIA 制作感知屏幕尺寸的表格 | Anglei

Post Navigation