表格属性(特有)

表格特有属性

  1.边框合并属性

属性

  border-collapse

            取值

1.separate  代表不合并

                2.collapse  代表合并

  2.边框边距

            属性:

border-spacing:

            作用:

 设置相邻两个边框的距离

            前提:

border-collapse取值一定是separate

            取值

1.值;      水平和垂直都一样

                2.  值1       值2; 

  水平方向   垂直方向

border-spacing:设置边框边距;

       设置边框前提border-collapse取值为sparete(不合并),

       当然border-collapse取值还有collaps(合并),在sparate(不合并)下才能进行表格边框边距设置;

       border-spacing取值一个值表示水平数值全部一样,两个值的话是:第一个值(水平),第二个(垂直)边距;

<style>
.t1{border-collapse:separate;
/*border-collapse:表格是否合并取值collapse合并,separete不合并*/

border-spacing:5px;
/*当边框不合并取值为separete时候可以进行外边距设置*/
/*一个值表示上下左右一样 两个值:第一个表示上下 第二个表示作业 */
table-layout:fixed;
/*显示规则table-layout默认auto自动计算,fixed根据自己设置排布*/
width:500px;
height:350px;
text-align: right;
vertical-align: top;

}

3.显示规则

            1.作用

规定单元格的 宽度 和 高度 处理方式

            2.属性

table-layout:

                取值

                    1.auto

  默认,自动计算单元格的宽和高

                    2.fixed

固定表格布局

table-layout:fixed;
/*显示规则table-layout默认auto自动计算,fixed根据自己设置排布*/

            3.对比

                1.自动表格布局table-layout:auto;

1.单元格大小会根据内容自动调整

                    2.加载复杂的表格速度比较慢

                    3.适用于不确定每列的内容大小

                2.固定表格布局table-layout:fixed;

1.单元格大小和内容无关

                    2.加载复杂表格相对较快

                    3.适用于每列内容固定的情况

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Spring相关

使用vue模拟购物车小球动画

2102
来自专栏代码世界

前端之CSS内容

一、CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素。 当浏览器读到一个样式表,它就会按照这个样式表来对文档...

34810
来自专栏进击的君君的前端之路

CSS常见样式(一)

3043
来自专栏Nian糕的私人厨房

CSS 基础

层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

1244
来自专栏黑泽君的专栏

day02_css学习笔记

882
来自专栏Python Web学习记录及整理

CSS学习记录及整理

<!DOCTYPE ”此文仅为个人学习的知识梳理,权威且更详细的内容请查阅w3school。“>

4468
来自专栏十月梦想

css选择器

            选择器{... !important} 则该选择器的优先级最高

825
来自专栏编程

【CSS】格仔背景

CSS代码 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } bod...

25410
来自专栏一个爱吃西瓜的程序员

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

3556
来自专栏我和未来有约会

Blend基础-布局控件

布局 什么是布局? Panels控件(其实就是容器控件) 对内部的子控件提供了自动布局功能 可以在容器控件内继续添加容器控件(一个复杂的界面往往是多种容器控件...

2396

扫码关注云+社区

领取腾讯云代金券