作为一家“创意+整合+营销”的成都网站建设机构,我们在业内良好的客户口碑。创新互联公司提供从前期的网站品牌分析策划、网站设计、成都做网站、网站设计、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务,帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。
table-layout 属性用来设置表格布局时所用的布局算法,属性的可选值如下:
值 | 描述 |
---|---|
automatic | 默认值,自定表格布局,表示表格中每列的宽度视单元格中的内容而定 |
fixed | 固定表格布局,表示表格的宽度由列宽度、单元格边框、单元格之间的间距等因素而定 |
inherit | 从父元素继承 table-layout 属性的值 |
固定表格布局允许浏览器更快地对表格进行布局。在固定表格布局中,表格的水平宽度仅取决于列宽度、表格边框宽度、单元格间距等因素,与单元格中的内容无关。也就是说,表格中超出表格宽度的内容可能会被忽略。
在自动表格布局中,列的宽度视单元格中的内容(没有换行的最宽内容)而定,也就是说如果某个单元格的宽度为 100px,但单元格中内容所占据的宽度要大于 100px,这就会导致单元格中的内容将单元格撑大。正是因为这一特点,此种算法可能会比较慢。
border-collapse 属性用来设置是否合并表格中相邻的边框,属性的可选值如下:
值 | 描述 |
---|---|
separate | 默认值,相邻的两个边框是分开的,使用它不会忽略 border-spacing 和 empty-cells 属性 |
collapse | 相邻的两个边框会合并为一个单一的边框,使用它会忽略 border-spacing 和 empty-cells 属性 |
inherit | 从父元素继承 border-collapse 属性的值 |
【示例】通过 border-collapse 属性来合并或拆分单元格的边框:
编号 | 姓名 | 年龄 |
---|---|---|
1 | 张三 | 15 |
2 | 李四 | 11 |
编号 | 姓名 | 年龄 |
---|---|---|
1 | 张三 | 15 |
2 | 李四 | 11 |
运行结果如下图所示:
默认情况下表格的边框是隐藏的,所以上面示例中我们需要使用
table, th, td { border: 1px solid black; }
border-spacing 属性可以设置相邻单元格边框之间的距离(仅在 border-collapse 属性为 separate 时才有效),它的效果等同于
border-spacing:0;
等同于 cellspacing="0"
)。border-spacing 属性的语法格式如下:border-spacing: length length;
参数 length 由数值和单位组成,表示相邻单元格边框之间的距离,其可选值如下:
值 | 描述 |
---|---|
length | 以数值加单位的形式设置相邻边框之间的间距,例如 2px,不允许使用负值。如果只定义一个 length 参数,那么这个值将同时作用于横向和纵向的间距;如果同时定义两个 length 参数,那么第一个 length 参数表示相邻边框的横向间距,第二个 length 参数表示相邻边框的纵向间距 |
inherit | 从父元素继承 border-spacing 属性的值 |
【示例】使用 border-spacing 属性设置表格中相邻边框的间距:
编号 | 姓名 | 年龄 |
---|---|---|
1 | 张三 | 15 |
2 | 李四 | 11 |
编号 | 姓名 | 年龄 |
---|---|---|
1 | 张三 | 15 |
2 | 李四 | 11 |
运行结果如下图所示:
caption-side 属性可以设置表格标题的位置,属性的可选值如下:
值 | 描述 |
---|---|
top | 默认值,将表格标题定位在表格正上方 |
bottom | 将表格标题定位在表格正下方 |
inherit | 从父元素继承 caption-side 属性的值 |
【示例】使用 caption-side 属性设置表格标题的位置:
编号 | 姓名 | 年龄 |
---|---|---|
1 | 张三 | 15 |
2 | 李四 | 11 |
编号 | 姓名 | 年龄 |
---|---|---|
1 | 张三 | 15 |
2 | 李四 | 11 |
运行结果如下图所示:
empty-cells 属性用来设置当某个单元格中没有内容时,是否显示这个空单元格(仅在 border-collapse 属性为 separate 时才有效),属性的可选值如下:
值 | 描述 |
---|---|
hide | 隐藏空单元格周围的边框 |
show | 默认值,显示空单元格周围的边框 |
inherit | 从父元素继承 empty-cells 属性的值 |
【示例】使用 empty-cells 属性来设置是否隐藏空单元格;
编号 | 姓名 | 年龄 |
---|---|---|
2 | 李四 | 11 |
编号 | 姓名 | 年龄 |
---|---|---|
2 | 李四 | 11 |
运行结果如下图所示:
文章标题:CSS表格样式(table)
转载源于:http://www.csdahua.cn/qtweb/news6/212606.html
网站建设、网络推广公司-快上网,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 快上网