table边框问题

01.正常情况下给table边框

.tableA{
        border: 1px solid #c8c8c8;
}
.tableA td{
        border: 1px solid #c8c8c8;
}

02.当table中出现colspan／rowspan时IE8中会出现边框消失问题。解决方法：用table的border-spacing/border-collapse属性，通过设置table和td的背景减出一个边框出来；

(注：此方法不能单独保留某边的边框，在使用此方法的时候还要先清除reset中对于cellspancing的设置，table的背景颜色既是边框的颜色.) 

.tableB{
        border-collapse: separate; 
        border-spacing: 1px; 
        background-color: #c8c8c8;
}
.tableB td{
        background-color: #fff;
}

03.只保留table行的边框

.tableC{
        border: solid #c8c8c8; 
        border-width: 1px 1px 0 1px;
}
.tableC td{
        border:solid #c8c8c8; 
        border-width: 0 0 1px 0; 
}

04.只保留table列的边框

.tableD{
        border:1px solid #c8c8c8;
}
.tableD td{
        border: solid #c8c8c8; 
        border-width: 0 1px 0 0; 
}

05.只保留td的底部边框

.tableE{
        border-width:0;
}
.tableE td{
        border: solid #c8c8c8; 
        border-width: 0 0 1px 0;
}

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/123

版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！