html设置表格平分,如果未知数量,如何在HTML表格中均匀分配列宽？

Thomas Praxl..

如果您至少了解了最大列数:这里是仅在给定一定数量的列时才应用某些分布的解决方案.

我的例子只关注原理并创建均匀分布的列.请注意,使用表格布局时这是超流体:固定和宽度:100%.

您可以轻松扩展此解决方案以指定除剩余列之外的第一列的宽度.

比如,允许的最大列数为4(包括可能的行标题).鉴于您在表中使用tbody,如下例所示:

XABC

1.abc

[...]

CSS代码:

table{table-layout:fixed;width:100%;}

tbody>tr>*:nth-last-child(2)~*{ width:50%}

tbody>tr>*:nth-last-child(3)~*{ width:33.3%}

tbody>tr>*:nth-last-child(4)~*{ width:25%}

它说:应用于行的倒数第二个元素的以下兄弟:宽度50%.(除了第一个元素之外,这是所有列,如果至少有2列).如果有两列,三列,四列或更多列,则应用此选择器.

但是之后:

应用于行的第三个最后一个元素的以下兄弟:宽度33.3%:再次:此选择器仅在至少有三个元素时有效.它会覆盖前一个选择器的规则(nth-last-child(2)),因此您的列现在的宽度为33.3%.如果只有两列,则不应用此选择器.

然后:四列相同.它再次覆盖先前定义的规则.

请注意,您需要为每个可能的列数定义宽度.因此,如果最多允许有20个列,那么这将是21行css.

我相信这个解决方案与IE9 +兼容,而不是IE8.但我目前还不是百分百肯定.请访问http://caniuse.com/css-sel3

html设置表格平分,如果未知数量,如何在HTML表格中均匀分配列宽？相关推荐

java怎么让表格的字段相乘,excel表格怎么让数据相乘-如何在excel表格中设置乘法公式...
EXCEL里的表格使两列自动相乘怎么设置? 在你需要得出结果的那个单元格,输入"＝",再点击你需要相乘的第一个单元格,再输入"*",再点击你需要相乘的第二个单元 ...
wps迷你版表格内文字缩放_如何在Google表格中使用迷你图
wps迷你版表格内文字缩放 When you're working with large amounts of data in a Google Sheets spreadsheet, it isn' ...
excel表格不够怎么添加_如何在Excel表格中添加特殊符号？借用快捷键，一步到位...
新年假期也即将到来,相信很多小伙伴们也都会回家过年.不过在这之前,我们还是需要做好手头上的工作的,对一些办公技巧还不熟练的朋友,今天小编给大家整理的了一些关于在Excel表格中添加特殊符号的小技巧,希 ...
html添加表格内添加背景图片,如何在Excel2013表格中为数据区域添加背景图片的方法...
为了美化Excel2013工作表,输入数据后,用户可以为工作表添加背景图片.在默认情况下,插人的背景图片是以平铺的方式占满整个工作表,如果需要背景图片只在数据区域中显示,可以使用下面介绍的方法来操作. ...
windows server 2008设置远程桌面连接最大数量
windows server 2008设置远程桌面连接最大数量系统默认远程桌面连接的数量为1 打开控制面板---管理工具---远程桌面服务---远程桌面会话主机设置---把"限制每个用户只 ...
设置服务器系统的远程登录数量,设置服务器远程登录用户数量
设置服务器远程登录用户数量内容精选换一换安装MySQL本文档以"CentOS 6.5 64bit(40GB)"操作系统为例,对应MySQL版本为5.1.73.CentOS 7 ...
生活中c语言排序案例,C语言之数字排序-基于冒泡排序法的一些案例（对未知数量的数字进行排序）...
C语言之数字排序在学习C语言的时候遇到了几个比较基础的排序问题,又结合了之前的处理方法.觉得在这个需要再系统地进行复习一下. 当我们在初学C语言的时候,我们都会结合三个数字的排序来理解计算机处理问题 ...
poi 设置word表格颜色_办公软件小课堂 Word表格的设置
你是否还在为考证烦恼?是否不知从何学起?学习部每周的办公软件小课堂!这里总有你想要的! 本周给大家整理的是 Word表格的设置 01 插入选择卡→表格 02 文本转表格步骤1:选中要转换成表格的文本 ...
怎么用python算单价和总价_怎样用EXCEL表格自动算出数量单价总金额
展开全部日常用EXCEL表格自动算出数量单2113价的总金额,5261需要用到EXCEL里面的公式,具体操作4102步骤如下: 1.创建1653一个EXCEL表格,在表格上输入有关于"数量 ...

html设置表格平分,如果未知数量,如何在HTML表格中均匀分配列宽？

html设置表格平分,如果未知数量,如何在HTML表格中均匀分配列宽？相关推荐

最新文章

热门文章