CSS如何删除表格中空单元格的边框?

想要使用CSS删除表格中空单元格的边框,可以使用empty-cells属性。empty-cells属性用于指定是否在表格的单元格无内容时显示边框。只有当表格边框独立(例如当border-collapse属性等于separate时)此属性才起作用。

CSS如何删除表格中空单元格的边框?
原文地址:CSS如何删除表格中空单元格的边框?
empty-cells属性设置或检索当表格的单元格无内容时,是否显示该单元格的边框。

语法:
empty-cells: show|hide;
属性值:

● show:用于显示空单元格上的边框;边框和背景正常渲染。

● hide:边框和背景被隐藏。

示例:


<!DOCTYPE html> 
<html> 
    <head>
        <meta charset="UTF-8">
        <title>empty-cell属性</title> 
        <style> 
            table.show { 
                empty-cells: show;
            } 
            td { 
                text-align:center;
            }
            table.hide{
                empty-cells: hide;
            }
        </style> 
    </head> 
    <body> 
        <center> 

            <h2>empty-cells: show;</h2> 
            <table class="show" border="1"> 
            <tr> 
                <td width="100px">HTML</td> 
                <td width="100px">CSS</td> 
            </tr> 
            <tr> 
                <td>javascript</td> 
                <td></td> 
            </tr> 
            </table>
            <h2>empty-cells: hide;</h2> 
            <table class="hide" border="1"> 
            <tr> 
                <td width="100px">HTML</td> 
                <td width="100px">CSS</td> 
            </tr> 
            <tr> 
                <td>javascript</td> 
                <td></td> 
            </tr> 
            </table>
        </center> 
    </body> 
</html>

效果图:

CSS如何删除表格中空单元格的边框?
推荐阅读:

java基础教程

layui框架

go语言教程

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章