zoukankan      html  css  js  c++  java
  • CSS表格属性

    CSS表格:

    属性

    描述

    border-collapse

    设置是否把表格边框合并为单一的边框。

    border-spacing

    设置分隔单元格边框的距离。

    caption-side

    设置表格标题的位置。

    empty-cells

    设置是否显示表格中的空单元格。

    table-layout

    设置显示单元、行和列的算法。

     

    1. 折叠表格边框:border-collapse 属性

    (1)作用:设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示;

    (2)补充知识点:表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

    (3)可能的值:

    描述

    separate

    默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

    collapse

    如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

    inherit

    规定应该从父元素继承 border-collapse 属性的值。

    (4)浏览器的支持性:所有主流浏览器都支持 border-collapse 属性。

    Ps: 必须规定 !DOCTYPE,否则 border-collapse 可能产生意想不到的结果。

     

    2. 表格内边距:padding属性

    #作用:控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性;

     

    3. 边框分离:border-spacing 属性

    (1)作用:该属性指定分隔边框模型中单元格边界之间的距离。除非 border-collapse 被设置为 separate,否则将忽略这个属性。尽管这个属性只应用于表,不过它可以由表中的所有元素继承。

    (2)可能的值:

    描述

    length length

    规定相邻单元的边框之间的距离。使用 px、cm 等单位。不允许使用负值。

    如果定义一个length参数,那么定义的是水平和垂直间距。

    如果定义两个length参数,那么第一个设置水平间距,而第二个设置垂直间距。

    inherit

    规定应该从父元素继承   border-spacing 属性的值。

    (3)浏览器的兼容性:除IE外的所有主流浏览器都支持 border-spacing 属性。如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 border-spacing 属性。

     

    4. 表格标题:caption-side属性

    (1)作用:设置表格标题的位置,该属性指定了表标题相对于表框的放置位置。表标题显示为好像它是表之前(或之后)的一个块级元素。

    (2)可能的值:

    描述

    top

    默认值。把表格标题定位在表格之上。

    bottom

    把表格标题定位在表格之下。

    inherit

    规定应该从父元素继承 caption-side 属性的值。

    (3)浏览器的兼容性:除IE外的所有主流浏览器都支持 caption-side 属性。如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 caption-side属性。

     

    5. 空单元格的处理:empty-cells 属性

    (1)作用:该属性定义了不包含任何内容的表单元格如何表示。如果显示,就会绘制出单元格的边框和背景。除非 border-collapse 设置为 separate,否则将忽略这个属性。

    (2)可能的值:

    描述

    hide

    不在空单元格周围绘制边框。

    show

    在空单元格周围绘制边框。默认。

    inherit

    规定应该从父元素继承 empty-cells 属性的值。

    (3)浏览器的兼容性:除IE外的所有浏览器都支持 empty-cells 属性。如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 empty-cells 属性。

     

    6. 表格布局算法:table-layout属性

    (1)作用:来显示表格单元格、行、列的算法规则,该属性指定了完成表布局时所用的布局算法。

    (2)两种算法:

          <1>固定表格布局: fixed

            #优点:允许浏览器更快地对表格进行布局, (在固定表格布局中,水平布局仅取决于表格宽度、列宽度、表格边框宽度、单元格间距,而与单元格的内容无关。通过使用固定表格布局,用户代理在接收到第一行后就可以显示表格。);

           #缺点:不太灵活。

          <2>自动表格布局:automatic

          #优点:更能反映传统的 HTML,(在自动表格布局中,列的宽度是由列单元格中没有折行的最宽的内容设定的。);

          #缺点:自动算法比较慢,这是由于它需要在确定最终的布局之前访问表格中所有的内容。

    (3)可能的值:

    描述

    automatic

    默认。列宽度由单元格内容设定。

    fixed

    列宽由表格宽度和列宽度设定。

    inherit

    规定应该从父元素继承 table-layout 属性的值。

     

  • 相关阅读:
    APP开发收藏的几个网址,APP性能监测
    MAC 安装STF
    更新react 之后 出现 can not find ‘@babel/runtime/helpers/esm/createSuper’ 提示
    react 相关笔记
    jenkins 配置子节点 关键在端口号和下方代理配置
    移动APP测试8点注意事项
    自动部署java项目,热部署方式
    ubuntu搭建elk服务器
    数据库常用操作,sql server; mysql
    windows 关闭端口占用及其他常见操作
  • 原文地址:https://www.cnblogs.com/alog0210/p/table_alog.html
Copyright © 2011-2022 走看看