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

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

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>

效果图:

1abf8225573a8c214a25e3b82eac92c.png

以上就是CSS如何删除表格中空单元格的边框?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏