I have summarized how to use css to achieve the border light and dark effect of table border + bordercolordark + bordercolorlight. Then a netizen asked me why he wrote a similar CSS style, but he could only see the border effect of the table normally under Opera, and there was nothing under IE.
I got off Opera9 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 this cell will not be displayed; Opera will use the style to render regardless of whether there is content or not. This question was encountered when I graduated. The department head came to ask me at that time, and 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 method to solve it.
But today I tried my best to study it a few times, and from Jiarry, I knew that the css syntax allowed us to change these default behaviors: using border-collapse:collapse; and empty-cells:show; to make the disappearing border 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 has content here
There is content here
class=test3: without 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 has content here
There is content here