csstable中empty-cells属性的具体分析

来源：懂视网责编：小采时间：2020-11-27 18:50:46

csstable中empty-cells属性的具体分析

csstable中empty-cells属性的具体分析:css里的empty-cells属性是所有浏览器都支持的，甚至包括IE8，它的用法是下面这个样子：table { empty-cells: hide;}估计你从语义上已经猜出它的作用了。它是为HTML table服务的。它会告诉浏览器，当一个table单元格里没有东西时，就隐藏它。下面的演示里

推荐度：

点击下载本文 文档为doc格式

导读csstable中empty-cells属性的具体分析:css里的empty-cells属性是所有浏览器都支持的，甚至包括IE8，它的用法是下面这个样子：table { empty-cells: hide;}估计你从语义上已经猜出它的作用了。它是为HTML table服务的。它会告诉浏览器，当一个table单元格里没有东西时，就隐藏它。下面的演示里

css里的empty-cells属性是所有浏览器都支持的，甚至包括IE8，它的用法是下面这个样子：

table {
 empty-cells: hide;}

估计你从语义上已经猜出它的作用了。它是为HTML table服务的。它会告诉浏览器，当一个table单元格里没有东西时，就隐藏它。下面的演示里，你可以点击里面按钮，它会切换empty-cells的属性值，看看table的显示有什么变化。

HTML代码

<table cellspacing="0" id="table">
 <tr>
 <th>Fruits</th>
 <th>Vegetables</th>
 <th>Rocks</th>
 </tr>
 <tr>
 <td></td>
 <td>Celery</td>
 <td>Granite</td>
 </tr>
 <tr>
 <td>Orange</td>
 <td></td>
 <td>Flint</td>
 </tr></table>
 <button id="b" data-ec="hide">切换EMPTY-CELLS</button>

CSS代码

body {
 text-align: center;
 padding-top: 20px;
 font-family: Arial, sans-serif;}table {
 border: solid 1px black;
 border-collapse: separate;
 border-spacing: 5px;
 width: 500px;
 margin: 0 auto;
 empty-cells: hide;
 background: lightblue;}th, td {
 text-align: center;
 border: solid 1px black;
 padding: 10px;}button {
 margin-top: 20px;}

js代码

var b = document.getElementById('b'),
 t = document.getElementById('table');b.onclick = function () {
 if (this.getAttribute('data-ec') === 'hide') {
 t.style.emptyCells = 'show';
 this.setAttribute('data-ec', 'show');
 } else {
 t.style.emptyCells = 'hide';
 this.setAttribute('data-ec', 'hide');
 }};

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

csstable中empty-cells属性的具体分析

推荐度：

点击下载本文 文档为doc格式

标签：表格中的表格中 css

热门焦点

csstable中empty-cells属性的具体分析

csstable中empty-cells属性的具体分析

csstable中empty-cells属性的具体分析

最新推荐

猜你喜欢

热门推荐