CSS |空单元格属性

此属性用于指定是否在表格的空单元格中显示边框。

null

语法:

empty-cells: show|hide|initial|inherit;

默认值:

  • 显示

属性值:

显示属性: 此属性用于显示空单元格上的边框。

  • 语法:
    empty-cell: show;
  • 例子:

    html

    <!DOCTYPE html>
    < html >
    < head >
    < title >empty-cell property</ title >
    < style >
    table.geek {
    empty-cells: show;
    }
    td {
    text-align:center;
    }
    .gfg {
    font-size:40px;
    font-weight:bold;
    color:green;
    }
    .geeks {
    font-size:17px;
    }
    </ style >
    </ head >
    < body >
    < center >
    < div class = "gfg" >GeeksforGeeks</ div >
    < div class = "geeks" >A computer science
    portal for geeks</ div >
    < h2 >empty-cells: show;</ h2 >
    < table class = "geek" border = "1" >
    < tr >
    < td >C Programming</ td >
    < td >C++ Programming</ td >
    </ trA >
    < tr >
    < td >Java</ td >
    < td ></ td >
    </ tr >
    </ table >
    </ center >
    </ body >
    </ html >

    
    

  • 输出: image

隐藏属性: 此属性用于在表的空单元格中隐藏边框。

  • 语法:
    empty-cell: hide;
  • 例子:

    html

    <!DOCTYPE html>
    < html >
    < head >
    < title >empty-cell property</ title >
    < style >
    table.geek {
    empty-cells: hide;
    }
    td {
    text-align:center;
    }
    .gfg {
    font-size:40px;
    font-weight:bold;
    color:green;
    }
    .geeks {
    font-size:17px;
    }
    </ style >
    </ head >
    < body >
    < center >
    < div class = "gfg" >GeeksforGeeks</ div >
    < div class = "geeks" >A computer science
    portal for geeks</ div >
    < h2 >empty-cells: show;</ h2 >
    < table class = "geek" border = "1" >
    < tr >
    < td >C Programming</ td >
    < td >C++ Programming</ td >
    </ trA >
    < tr >
    < td >Java</ td >
    < td ></ td >
    </ tr >
    </ table >
    </ center >
    </ body >
    </ html >

    
    

  • 输出: image

初始属性: 此属性用于设置默认属性。

  • 语法:
    empty-cell: initial;
  • 例子:

    html

    <!DOCTYPE html>
    < html >
    < head >
    < title >empty-cell property</ title >
    < style >
    table.geek {
    empty-cells: initial;
    }
    td {
    text-align:center;
    }
    .gfg {
    font-size:40px;
    font-weight:bold;
    color:green;
    }
    .geeks {
    font-size:17px;
    }
    </ style >
    </ head >
    < body >
    < center >
    < div class = "gfg" >GeeksforGeeks</ div >
    < div class = "geeks" >A computer science
    portal for geeks</ div >
    < h2 >empty-cells: show;</ h2 >
    < table class = "geek" border = "1" >
    < tr >
    < td >C Programming</ td >
    < td >C++ Programming</ td >
    </ trA >
    < tr >
    < td >Java</ td >
    < td ></ td >
    </ tr >
    </ table >
    </ center >
    </ body >
    </ html >

    
    

  • 输出: image

继承财产: 此属性用于从其父级继承属性。

  • 语法:
    empty-cell: inherit;
  • 例子:

    html

    <!DOCTYPE html>
    < html >
    < head >
    < title >empty-cell property</ title >
    < style >
    table.geek {
    empty-cells: initial;
    }
    .g4g {
    empty-cells: inherit;
    }
    td {
    text-align:center;
    }
    .gfg {
    font-size:40px;
    font-weight:bold;
    color:green;
    }
    .geeks {
    font-size:17px;
    }
    </ style >
    </ head >
    < body >
    < center >
    < div class = "gfg" >GeeksforGeeks</ div >
    < div class = "geeks" >A computer science
    portal for geeks</ div >
    < h2 >empty-cells: show;</ h2 >
    < table class = "geek" border = "1" >
    < tr >
    < td >C Programming</ td >
    < td >Algorithm</ td >
    </ tr >
    < tr >
    < td ></ td >
    < td >
    < table class = "g4g" border = "1" >
    < tr >
    < td >DP</ td >
    < td >Backtracking</ td >
    </ tr >
    < tr >
    < td >Sorting</ td >
    < td ></ td >
    </ tr >
    </ table >
    </ td >
    </ tr >
    </ table >
    </ center >
    </ body >
    </ html >

    
    

  • 输出: image inherit property

支持的浏览器: 支持的浏览器 CSS |空单元格属性 以下列出了:

  • 谷歌Chrome1.0
  • Internet Esplorer 8.0
  • 火狐1.0
  • 歌剧4.0
  • Safari 1.2
© 版权声明
THE END
喜欢就支持一下吧,技术咨询可以联系QQ407933975
点赞15 分享