CSS 揭秘(7)--精确控制表格列宽

Posted by liveipool on February 9, 2017

精确控制表格列宽

表格的列宽一直难以控制。因为浏览器进行了很多默认设置,由于层叠原理,导致我们的一些设置不起作用。

在CSS2.1中有一个鲜为人知的属性,叫做table-layout。它的默认值是auto,其默认行为被称作自动表格布局算法,也就是我们最熟悉的表格布局行为:
37.1.png

不过,这个table-layout属性还有另外一个值:fixed,这个值的行为要明显可控一些。它把更多的控制权交给了网页开发者,只把较少的控制权留给渲染引擎。我们设置的样式会直接起作用,而不仅仅像以前只是作为一种提示。同时,移除行为(包括text-overflow)与其他元素行为也是一样的,因此表格的内容将只能影响表格行的高度了。
这种固定表格布局算法不仅更容易预测、便于使用,同时也明显更快。

在未修改table-layout属性前,我们通过下面这段代码生成了上面这段表格:

// jade
	div.m-20.p-5.w-600
		table
			tr
				td 如果我们不...
				td 指定单元格的宽度,则这些单元格就会根据它们内容的长短来分配宽度。也就是说,内容较长的单元格所能分配到的宽度也越多
		table
			tr 
				td 如果我们不...
				td 指定单元格的宽度,则这些单元格就会根据它们内容的长短来分配宽度。也就是说,内容较长的单元格所能分配到的宽度也越多
			tr
				td 表格的每一行都会参与到列宽的计算中,而不仅是第一行
				td 注意,这个表格的列宽分配结果跟上面那个表格不同
		table
			tr
				td.w-1000 即使我们为单元格指定了宽度,也未必会得到对应的结果,比如这个单元格的宽度被指定为1000px
				td 而这个单元格的宽度被指定为2000px。由于外层容器所能提供的空间远远不足3000px,这两个单元格的宽度会按比例缩小,分别得到三分之一和三分之二
		table
			tr 
				td.w-200 如果禁止文本折行,表格宽度可能会超出容器的宽度
				td 而且 text-overflow: ellipsis(超出的用省略号代替)对此也无能为力,这一点非常遗憾
		table
			tr
				td.w-500 大图片或代码块也可能导致同样的问题
				td
					img(src="/static/pictures/08685344-11d9-426d-a204-ccabbf7049ba-2060x1236.jpeg")
// css
div {
	border: 2px dotted black;
}

table {
	margin-top: 10px;
}

td {
	border: 1px solid black;
}

table:nth-child(3) tr td + td {
	width: 2000px;
}

table:nth-child(4) tr td,
table:nth-child(4) tr td + td {
	white-space: nowrap;
	text-overflow: ellipsis;
}

下面我们将table-layout属性进行修改,再对表格进行一些修改和控制:
(注意为了使table-layout属性起作用,要给table设置一个width属性,100%都好)
下面为修改后的代码和效果图,现在我们对表格的控制已经非常好了

// jade
	div.m-20.p-5.w-600
		table
			tr
				td 如果我们不...
				td 指定单元格的宽度,则这些单元格就会根据它们内容的长短来分配宽度。也就是说,内容较长的单元格所能分配到的宽度也越多
		table
			tr 
				td 如果我们不...
				td 指定单元格的宽度,则这些单元格就会根据它们内容的长短来分配宽度。也就是说,内容较长的单元格所能分配到的宽度也越多
			tr
				td 表格的每一行都会参与到列宽的计算中,而不仅是第一行
				td 注意,这个表格的列宽分配结果跟上面那个表格不同
		table
			tr
				td.w-1000 即使我们为单元格指定了宽度,也未必会得到对应的结果,比如这个单元格的宽度被指定为1000px
				td 而这个单元格的宽度被指定为2000px。由于外层容器所能提供的空间远远不足3000px,这两个单元格的宽度会按比例缩小,分别得到三分之一和三分之二
		table
			tr 
				td 如果禁止文本折行,表格宽度可能会超出容器的宽度
				td 而且 text-overflow: ellipsis(超出的用省略号代替)对此也无能为力,这一点非常遗憾
		table
			tr
				td.w-100 大图片或代码块也可能导致同样的问题
				td
					img(src="/static/pictures/08685344-11d9-426d-a204-ccabbf7049ba-2060x1236.jpeg")
// css
div {
	border: 2px dotted black;
}

table {
	margin-top: 10px;
	table-layout: fixed;
	width: 100%;
}

td {
	border: 1px solid black;
}

table:nth-child(3) tr td + td {
	width: 2000px;
}

table:nth-child(4) tr td + td {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

37.2.png

现在各列的宽度将是平均分配的,后续的表格也并不会影响列宽。