Home  >  Article  >  Web Front-end  >  How to display the border of td when it is empty_HTML/Xhtml_Web page production

How to display the border of td when it is empty_HTML/Xhtml_Web page production

WBOY
WBOYOriginal
2016-05-16 16:43:531183browse

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn