CODEWITHSUNDEEP
cssinternet-explorerfirefoxgoogle-chrome
imgr8
imgr8

Reputation: 511

Table border overlapping in IE

I know that IE doesn't apply css style to table rows, so I had to do a workaround where I added style to each cell instead. Now my problem is that in Firefox/Chrome, the outer border shows perfectly; but in IE it has gaps from the bottom border of the cell. This is what the difference looks like https://i.sstatic.net/9rg8S.jpg I cannot change the contents of the linked stylesheet and I cannot figure out what they are trying to say here CSS Table cell border overlapping table border

Linked Stylesheet (style.css) contents:

body {
background-color: #cc0000;
}

.tablewhite{

border-collapse: collapse;
}

.tablewhite td{
background-color: #cc0000;;
color: #000;
font-weight: 10px;
border: 1px solid #fff;
padding-left: 2psx;
padding-right: 4px;
border-spacing: 0px;
}

HTML Page: http://pastebin.com/2mZYDx1n

Upvotes: 0

Views: 3749

Answers (3)

Rob Lee
Rob Lee

Reputation: 75

Do this:

body {
background-color: #cc0000;
}

.tablewhite{


border: 2px solid #000;
border-collapse: collapse;

}

tr {
    border-left: none !important;   
}

.left {
    border-left: none !important;   
}

.right {
    border-right: none !important;
}   

.tablewhite td{
background-color: #cc0000;;
color: #000;
font-weight: 10px;
border: 1px solid #fff;
padding-left: 2px;
padding-right: 4px;
border-collapse: collapse;
}



tbody {
    border: 2px solid #000;
}

Upvotes: 0

Dolan Antenucci
Dolan Antenucci

Reputation: 15942

Try adding a border onto your table: 

.tablewhite{
    border: 2px solid black;
    border-collapse: collapse;
}

Upvotes: 1

Rob Lee
Rob Lee

Reputation: 75

.tablewhite {
    border-left: 1px solid #A3A3A3; 
    border-right: 1px solid #A3A3A3;
    background: #CCC;
}

.tablewhite td {
background-color: #cc0000;;
color: #000;
font-weight: 10px;
border-bottom: 1px solid #fff;
padding-left: 2psx;
padding-right: 4px;
border-spacing: 0px;
}

Upvotes: 0

Related Questions