【CSS 表格属性(Table)】


用于属性名CSS 版本
① 单元格/表格 边框 合并border-collapse2
② 设置 表格/单元格 边框间距 /间隔距离 (搭配 border-collapse 属性 )。border-spacing2
③ 表格标题的 位置caption-side2
④ 设置 表格 空单元格的显示 (空单元格的 边框/背景)empty-cells2
⑤ 表格 布局方法 (不可换行时,表格总宽度 是否固定)。table-layout2

1. border-collapse 属性: 单元格/表格 边框 合并

  • 设置 单元格/表格边框 是否合并: border-collapse 美 /kəˈlæps/
    • 设置 表格的边框 是分开的 还是合并的。
      • ① 在分隔模式下: separate
        • 相邻的单元格 都拥有 独立的边框。
        • 当单元格 被分隔时,单元格 边框之间的距离 由 边框间距 border-spacing 属性 设置。
      • ② 在合并模式下: collapse
        • 相邻单元格 共享边框。
          • 单元格 边框之间 的距离,变成0
          • 单元格和 表格边框 之间的距离,变成0

  • 适用对象
    • 单元格的 父元素: table 标签
      • 注意,不是 <th>,<td> 单元格本身,而是应用于 它们的父元素 <table>
      • 因为 父元素才有单元格 边框之间的概念,单个单元格 ,就无所谓单元格 边框之间的距离了

  • 单元格/表格 边框合并的 语法
    • border-collapse: collapse|separate|inherit;
/* 关键字值 Keyword values */
border-collapse: collapse;
border-collapse: separate;

/* 全局值 Global values */
border-collapse: inherit;
border-collapse: initial;
border-collapse: unset;

  • border-collapse 属性 指定为: 单个关键字,可以从下面的列表中 选择。
  • 单元格/表格 边框合并的 属性值
    • 边框不合并/分隔开(默认值): separate
      • 独立的边框: 每个单元格 拥有 独立的边框
        • (采用 separated-border 表格渲染模型)
        • 边框 会被分开。
          • 在这里插入图片描述
      • 不会忽略 border-spacingempty-cells 属性。
    • 边框合并: collapse
      • 相邻的单元格 共用 同一条边框
        • (采用 collapsed-border 表格渲染模型)。
        • 如果可能,边框会 合并为一个 单一的边框。
          • 在这里插入图片描述
      • 会忽略 border-spacingempty-cells 属性。
    • 继承父亲: inherit
      • 从父元素 继承 border-collapse 属性的值。
    • 单元格边框合并的 默认被继承性
      • 被继承
      • yes

  • 边框合并的 浏览器支持
    • 在这里插入图片描述

  • 示例1: 给一个表格 设置边框
  • html
<table class="bdcollapse">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>王志</td>
        <td></td>
        <td>篮球</td>
    </tr>
    <tr>
        <td>李文</td>
        <td></td>
        <td>漫画</td>
    </tr>
    <tr>
        <td>章武</td>
        <td></td>
        <td>跆拳道</td>
    </tr>
</table>
  • 表格的 默认样式: 无边框
    • 在这里插入图片描述
  • 表格table加边框的 默认样式:
    • 只会在表格的四边 加上 边框
table.bdcollapse{
    border: solid;
}
  • 在这里插入图片描述
  • table,th 加边框
    • 表格 整体的四边 和标题单元格 有边框
.bdcollapse,.bdcollapse th{
    border: solid;
}
  • 在这里插入图片描述
  • table,th,td 加边框的 默认样式
    • 四边,标题单元格 和 数据单元格 ,都有边框
    • 默认是 独立的边框,边框之间 有距离
.bdcollapse,.bdcollapse th,.bdcollapse td{
    border: solid;
}
  • 在这里插入图片描述
  • 合并 单元格边框
    • border-collapse 的设置位置:
      • table 中设置,在th,td中设置 是无效的
.bdcollapse{
    border: solid;
    border-collapse:collapse ;
}
.bdcollapse th,.bdcollapse td {
    border: solid;
}
  • 在这里插入图片描述

2. border-spacing 属性: 设置 表格/单元格 边框间距 /间隔距离 (搭配 border-collapse 属性 )

  • 设置 表格/单元格 边框间隔距离: border-spacing 属性
    • 设置 表格 相邻单元格的 边框间 的距离
      • = 单元格 边框之间的距离。
    • 使用前提:
      • 搭配属性: 用于“边框不合并/分隔”模式: border-collapse: separate;
    • 适用对象
      • 单元格的父元素: 表格 table 元素
        • 注意,不是 th,td,在单元格中使用,是没有效果的
      • 表格的四边: border-spacing 值也适用于 表格的外层边框上
        • 即 表格的边框 和 四条边 相邻单元格 (第一行的、第一列的、最后一行的、最后一列的单元格) 之间的间距 = 由表格相应的(水平的或垂直的) 边框间距border-spacing)+ 相应的(上,右,下或左)内边距 之和。
        • 在这里插入图片描述

  • 边框间距的 语法
    • border-spacing: length length;
/* 长度值 <length> */
border-spacing: 2px;

/* 水平值 horizontal <length> | 垂直值 vertical <length> */
border-spacing: 1cm 2em;

/* 全局值 Global values */
border-spacing: inherit;
border-spacing: initial;
border-spacing: unset;

  • 边框间距的 属性值
    • 长度值: length length
      • 使用 px、cm 等单位。
      • 负值: 不允许 使用负值。
      • 1 个值: 只设置 1个长度值
        • = 水平间距 = 垂直间距。
        • 水平/垂直间距 相等
          • 相邻 两列的单元格之间的 水平距离
      • 2 个值: 设置 2个长度值
        • 第一个: 设置水平 边框间距
        • 第二个: 设置垂直 边框间距。
          • 相邻 两行的单元格之间的 垂直距离
    • 继承父亲: inherit
      • 从父元素 继承 border-spacing 属性的值。
      • 父元素的 border-spacing 的计算值的关键字,其父元素 必须应用了 border-spacing

  • 边框间隔的 继承
    • 这个属性 只应用于表格 table
      • 但可以由 表中的所有元素 继承。
    • 边框间隔的 默认继承性
      • 会被继承
      • yes

  • 边框间距的 浏览器支持
    • 在这里插入图片描述

  • 示例1: 给一个表格 设置 边框间距
  • css
table.bdspacing{
    border: solid;
    /*border-collapse:collapse;*/
    border-collapse:separate;
    border-spacing: 10px;
    /*border-spacing: 5px 20px;*/
    /*padding: 10px;*/

}
.bdspacing th,.bdspacing td {
    border: solid;
    background-color: #dddde3;
}
默认 边框间距设置 一个长度值 border-spacing: 10px;
设置 两个长度值 border-spacing: 5px 20px;增加 表格的内边距 padding: 10px;
只有 距离四条边的距离 增加了

3. caption-side 属性: 设置 表格标题的位置

  • 设置 表格标题的位置: caption-side 属性
    • 设置 表格标题的位置。
      • 将 表格的标题 <caption> 放到 指定的位置。
    • 搭配属性: 具体显示的位置 也与表格的 书写模式 writing-mode 属性值 有关。
    • 指定了 表标题 相对于表框的放置位置。

  • 适用对象
    • ① 表格 table 元素
    • ② 表格标题 caption 元素
      • 两个元素中设置,都能设置 表格标题的位置

  • 表格标题 位置 语法
    • caption-side: top|bottom|left|right|inherit;
/* 方向值 Directional values */ 
caption-side: top; 
caption-side: bottom; 

/* Warning: 非标准化 属性值,浏览器的支持很差 non-standard values */ 
caption-side: left; 
caption-side: right; 
caption-side: top-outside; 
caption-side: bottom-outside; 

/* 全局值 Global values */ 
caption-side: inherit; 
caption-side: initial; 
caption-side: unset;

  • 表格标题 位置 属性值
    • 表格之上 (默认值): top
      • 把 表格标题 放在 表格之上。
        • 在这里插入图片描述
    • 表格下方: bottom
      • 把 表格标题 放在 表格之下。
        • 在这里插入图片描述
    • 表格左边: left
      • 把 表格标题 放在 表格的左边。
      • 非标准:
        • 这个值是为 css2 提出的,但是从最终的 css2.1 规范中删除了。这是非标准的。
    • 表格右边: right
      • 把 表格标题 放在 表格的右边。
      • 非标准:
        • 在CSS 2 阶段,这个值被建议加入到规范中,但是在在最终的CSS 2.1规范中被移除。它是非标准属性。
    • 表格标题 位置 继承性
      • 被继承
      • yes

  • 上图 涉及的 代码
  • css
table.captionside{
     border: solid;
     /*border-collapse:collapse;*/
     border-collapse:separate;
     border-spacing: 10px;
     /*border-spacing: 5px 20px;*/
     /*padding: 10px;*/
    caption-side: top;
    caption-side: bottom;

 }
.captionside caption{
    /*設置 表格標題的位置 也可以在 table 選擇器中*/
    /*caption-side: top;*/
    /*caption-side: bottom;*/
    border: solid;
    background-color: #dadad4;    
}
.captionside th,.captionside td {
    border: solid;
    background-color: #dddde3;
}
  • html
<table class="captionside">
    <caption>学生的爱好</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>爱好</th>
    </tr>
    <tr>
        <td>王志</td>
        <td></td>
        <td>篮球</td>
    </tr>
    <tr>
        <td>李文</td>
        <td></td>
        <td>漫画</td>
    </tr>
    <tr>
        <td>章武</td>
        <td></td>
        <td>跆拳道</td>
    </tr>
</table>

  • 表格标题 位置的 浏览器支持
    • 在这里插入图片描述

4. empty-cells 属性: 设置 表格 空单元格的显示 (空单元格的 边框/背景)

  • 设置 表格 空单元格的显示: empty-cells属性
    • 边框/背景: 设置 是否显示 表格中的 空单元格的 边框/背景
      • 属性设置 边框和背景 是否出现在 没有可见内容的 单元格周围。
    • 使用前提
      • 仅用于 边框不合并/分隔时: border-collapse:separate;
      • 边框合并时,空单元格 empty-cells 的设置 无效
    • 适用对象
      • table 元素,th,td 元素
边框不合并/分隔时的 空单元格边框合并时的 空单元格 border-collapse:collapse;
合并边框的 隐藏 空单元格
(无效,因为 边框是共享的,形成一个空格单元格)
分隔边框的 隐藏 空单元格
空单元格的 边框和背景 都消失了

  • 空单元格显示的 语法
    • empty-cells: show|hide|inherit;
/* 关键字值 Keyword values */
empty-cells: show;
empty-cells: hide;

/* 全局值 Global values */
empty-cells: inherit;
empty-cells: initial;
empty-cells: unset;

  • 空单元格 显示 属性值
    • 正常显示 空单元格 (默认值): show
      • 边框和背景 正常渲染。与普通元素一样。
        • 在这里插入图片描述
    • 隐藏 空单元格: hide
      • 隐藏 空单元格的 边框和背景
        • 在这里插入图片描述
    • 继承父亲: inherit
      • 从父元素 继承 empty-cells 属性的值。

  • 空单元格 显示 浏览器支持
  • 在这里插入图片描述

5. table-layout 属性: 表格 布局方法 (不可换行时,表格总宽度 是否固定)

  • 设置 表格 布局方法: table-layout
    • 用于布局 表格 单元格/ 行 / 列的算法。
    • 设置 表格布局
      • ❶ 固定布局
      • ❷ 自动布局
    • 适用对象
      • table , display: inline-table 元素

  • 固定布局 和 自动布局的 区别
    • ① 表格 固定布局:
      • ❶ 与 单元格的内容 无关
        • 水平布局仅取决于: 表格宽度、列宽度、表格边框宽度、单元格间距。
        • 表和列的宽度: 不可换行时,是固定不变的
          • 是由 table, col 元素的宽度 或 第一行 单元格的宽度 设置的。
          • 后续行中的单元格 不影响列宽。
      • ❷ 速度: 固定布局 算法比较快,但 不灵活
        • 在接收到 第一行后 就可以显示表格。
    • ② 表格 自动布局
      • ❶ 与 单元格的内容 相关:
        • 表格及单元格的宽度: 不可换行时,不是固定不变的,即使 设置了固定值
          • 会根据包含的内容,进行调整
          • 列的宽度: 是由 列单元格中 没有折行的 最宽的内容 设定的。
      • ❷ 速度: 自动布局会较慢
        • 在确定最终的布局之前, 要访问 表格中 所有的内容。

  • 表格布局的 语法
    • table-layout: auto|fixed|inheirt;
/* 关键字值 Keyword values */
table-layout: auto;
table-layout: fixed;

/* 全局值  Global values */
table-layout: inherit;
table-layout: initial;
table-layout: unset;

  • 表格布局的 属性值
    • 自动布局: auto
      • 列宽度,由单元格内容设定。
        • 大多数浏览器 采用 表格的 自动布局算法 对表格布局。
      • 表格及单元格的宽度: (不可换行时,不是固定的)
        • 取决于 包含的内容,会根据内容 进行调整。
      • 不换行时: 不会溢出
        • 总宽度 根据内容 自动调整, 会变大
    • 固定布局: fixed
      • 表和列的宽度: (不可换行时,是固定的)
        • 是由 table, col 元素的宽度 或 第一行 单元格的宽度 设置的。不会根据内容 进行调整.
        • 后续行中的单元格 不影响列宽。
      • 速度快: 在“固定”布局方法下,一旦 下载并分析了 第一个表行,就可以 呈现整个表。
        • 这可以 比“自动”布局方法的 加快 呈现时间,但是后续的单元格内容 可能不适合 提供的列宽度。
      • 裁剪溢出内容:
        • 单元格使用 overflow 属性 来确定是否要 裁剪 任何已溢出的内容,但仅当 表的宽度 已知时;否则,它们 不会溢出单元格。
      • 不换行时: 可能会溢出, 宽度不够时,会溢出
        • 因为 不会根据内容 调整总宽度,宽度是固定的,超出 就会溢出
    • 继承父亲: inherit
      • 从父元素继承 table-layout 属性的值。
    • 表格布局的 默认继承性
      • 会被继承
      • yes

  • 表格 布局方法的 浏览器支持
    • 在这里插入图片描述

  • 示例1: 设置 一个表格的 布局方法
    • ❶ 宽度 width 属性: 来限制表的宽度。
    • ❷ 文本溢出 text-overflow 属性: 用于对太长 而不适合的单词(隐藏的 溢出内容) 应用省略号。
    • ❸ 溢出 overflow: 让溢出内容隐藏,才能使用 text-overflow
    • ❹ 空格/换行处理 white-space: 让内容 不换行,才会有内容 可能会溢出
  • css
.tblayout {
    border: 2px solid #006600;
    width: 15%;
    table-layout: auto;
    /*table-layout: fixed;*/


}

.tblayout th,td {
    border: 1px solid #006600;
    background-color: #efefef;
    /*不换行,隐藏溢出内容,隐藏的溢出内容的 显示符号,都是针对单元格内容的,所以在这里设置*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
  • html
<table class="tblayout">
    <tr>
        <th>成语名</th>
        <th>相关句子</th>
    </tr>
    <tr>
        <td>居安思危</td>
        <td>居安思危,思则有备,有备无患。</td>
    </tr>
    <tr>
        <td>未雨绸缪</td>
        <td>宜未雨而绸缪,毋临渴而掘井。</td>
    </tr>
</table>
默认布局 (表格 自动布局) table-layout: auto;
根据内容 调整行列的宽度;
内容太长,默认会自动换行
表格 固定布局 table-layout: fixed;
总宽度没变,行列的宽度 变化了,不是根据内容 调整
默认会 自动换行
自动布局时的显示
不换行,没有溢出,总宽度 根据内容 自动调整, 变大了
固定布局时的 溢出显示
不换行,不根据内容 调整总宽度,溢出了


♣ 结束语 和 友情链接


  • 感谢:♥♥♥ 如果这篇文章 对您有帮助的话,可以点赞、评论、关注,鼓励下作者哦,感谢阅读 ~
  • 欢迎指正: 如果发现 有需要 更正的细节问题,欢迎指正,谢谢大家 ~╮( ̄▽ ̄)╭

  • 支持作者: 持续更新中,❤ 您的每一分赞助,让作者走得更远。
    • 可以备注 支持的理由 或 想对作者说的话哦~
      在这里插入图片描述
  • 赞助二维码:
    在这里插入图片描述

  • 转载 请评论告知作者 并注明出处 ,Thanks♪(・ω・)ノ
    • 作者:Hey_Coder
    • 来源:CSDN
    • 原文:https://blog.csdn.net/VickyTsai/article/details/103231762
    • 版权声明:本文为博主原创文章,转载 请评论告知作者 并附上博文链接!

在这里插入图片描述

  • 7
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值