• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • empty-cells

    CSS中empty-cells属性定义了用户端user agent应该怎么来渲染表格<table>中没有可见内容的单元格的边框和背景。

    示例

    /* keyword values */
    empty-cells: show;
    empty-cells: hide;
    
    /* global values */
    empty-cells: inherit;
    empty-cells: initial;
    empty-cells: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE8以上版本的浏览器都支持empty-cells

    语法:

    empty-cellsshow| hide

    注意:只有当border-collapse属性值是separate时,才会生效。

    取值:

    • show:指定当表格的单元格无内容时,显示该单元格的边框。
    • hide:指定当表格的单元格无内容时,隐藏该单元格的边框。

    说明:

    设置或检索当表格的单元格无内容时,是否显示该单元格的边框。

    • IE7及以下浏览器中默认隐藏无内容的单元格边框,要想使其获得与 show 参数值相同的效果,可以变相给该空单元格加个占位且不可见的元素,例如全角空格&nbsp;等等。
    • 只有当表格边框独立(即border-collapse属性等于separate时)此属性才起作用。
    • 对应的脚本特性为emptyCells
    默认值show
    适用于table系元素
    继承性
    动画性
    计算值指定值

    例子

    //HTML
    
    <table class="table_1">
      <tr>
        <td>moe</td>
        <td>larry</td>
      </tr>
      <tr>
        <td>curly</td>
        <td></td>
      </tr>
    </table>
    <br>
    <table class="table_2">
      <tr>
        <td>moe</td>
        <td>larry</td>
      </tr>
      <tr>
        <td>curly</td>
        <td></td>
      </tr>
    </table>
    
    //CSS
    .table_1 {
      empty-cells: show;
    }
    
    .table_2 {
      empty-cells: hide;
    }
    
    td,
    th {
      border: 1px solid gray;
      padding: 0.5rem;
    }
    

    上篇:caption-side