css empty-cells属性隐藏表格空单元格的边框和背景

原创 国哥笔记  2018-11-20 09:35  阅读 753 views 次

empty-cells属性定义及用法

在css中,empty-cells属性是专门用来为表格服务的,用来设置是否显示表格中的空单元格(包括边框和背景)。当我们需要实现让表格中的空单元格的边框和背景不显示,使用empty-cells属性就可以简单实现。

empty-cells属性的属性值就hide、show、inherit这三个,非常容易记。hide有隐藏的意思嘛,就是隐藏表格中的空单元格的边框和背景;show有展示的意思嘛,就是不隐藏表格中的空单元格的边框和背景,是默认属性,如果不隐藏空单元格的边框和背景,可以不定义empty-cells属性。inherit最常见的,常见不是说用的多,而是基本每个属性都有该属性值,就是继承父元素中empty-cells属性的值。

empty-cells属性语法格式

  1. css语法:empty-cells:hide/show/inherit;(例:empty-cells:hide;)
  2. JavaScript语法:object.style.emptyCells="hide";

empty-cells属性值说明

  • hide:隐藏空单元格的边框和背景;
  • show:不隐藏空单元格的边框和背景(默认);
  • inherit:从父元素继承empty-cells属性的值。

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css empty-cells属性隐藏表格空单元格的边框和背景</title>
<style type="text/css">
body{background-color: #aaa;}
table{width: 400px;height: 100px;}
#show,#hide{background: antiquewhite;}
.show{empty-cells:show;}/*可以省略*/
.hide{empty-cells:hide;}
</style>
</head>
<body>
<table border="1" class="show">
<tr><td>姓名</td><td>张三</td><td>李四</td><td>王五</td></tr>
<tr><td>成绩</td><td>30</td><td id="show"></td><td>80</td></tr>
</table>
隐藏空单元格边框和背景后:
<table border="1" class="hide">
<tr><td>姓名</td><td>张三</td><td>李四</td><td>王五</td></tr>
<tr><td>成绩</td><td>30</td><td id="hide"></td><td>80</td></tr>
</table>
</body>
</html>

运行结果:

css empty-cells属性隐藏表格空单元格的边框和背景

注意

隐藏空单元格边框和背景中的背景指的是单元格的背景(对td元素设置的背景),并不是表格或父元素的背景。

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/empty-cells.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情