Home > Article > Web Front-end > How to display the border of td when it is empty_HTML/Xhtml_Web page production
I previously summarized how to use css to achieve the border light and dark effect of the table's border, bordercolordark, bordercolorlight, and then a netizen asked me why he wrote a similar css style, but the border effect of the table can only be seen normally under Opera, and under IE Then there is nothing.
I downloaded Opera 9 and saw that it was indeed the case. The reason is not complicated: because under IE (Firefox seems to be consistent with IE), if the content of a td is empty, even if you set the height and width, the border style of the cell will not be displayed; Opera Regardless of whether there is content or not, styles are always used for rendering. I encountered this problem right after I graduated. The section chief of the department at that time came to ask me. Later I told him: Just add it to every empty TD. Every time I encounter this problem in the future, I will use this simple, crude and effective way to solve it.
But today I did a lot of research and learned from Jiarry that the original CSS syntax allows us to change these default behaviors: using border-collapse:collapse; and empty-cells:show; The disappearing borders appear.
class="test1": add border-collapse:collapse;
.test1{
border:1px solid #999999;
border-collapse:collapse;
width:60%
}
.test1 td{
border-bottom:1px solid #999999;
height:28px;
padding-left:6px;
}
class1 There is content here
There is content here
class="test2": add border-collapse:collapse; and empty-cells:show;
.test2{
border:1px solid black;
border-collapse:collapse ;
width:60%
}
.test2 td{
border-bottom:1px solid black;
height:28px;
padding-left:6px;
empty -cells:show;
}
class2 There is content here
There is content here
class="test3": Without adding border-collapse:collapse; and empty-cells:show;
.test3{
border:1px solid #999999;
width:60%
}
.test3 td{
border-bottom:1px solid #999999;
height: 28px;
padding-left:6px;
}
class3 Content here
Content here