Codd Wrench Codd Wrench - 24 days ago 7
CSS Question

how fix bug with white lines between the cells of the table in IE11

I need make a beautiful table which can be varied properties: width, height, border.

The width and height adjusts to the outer container and the other properties are applied to table.

It all works correctly in all of the current browsers except IE 11.
And i had implemented two options, is simply table and based on div, the bug is present in both cases.

How it looks



html:

<div class="table">
<div class="row">
<div class="cell"></div>
...
</div>
...
</div>


css:

.table {
display: table;
width: 100%;
height: 100%;
}

.table .row {
display: table-row;
}

.table .cell {
display: table-cell;
text-align: center;
overflow: hidden;
vertical-align: middle;
}

.row.body:nth-child(odd) .cell {
background-color:rgb(156,156,156);
}

.row.body:nth-child(even) .cell {
background-color:rgb(255,255,255);
}

.row:last-of-type .cell:last-of-type {
border-bottom-right-radius:16px;
}

.row:last-of-type .cell:first-of-type {
border-bottom-left-radius:6px;
}

.row .cell:last-of-type{
border-right:3px solid rgb(100,0,0);
}


result:

white lines in IE

How to get rid or to avoid this?

Why does not fit the width of the manual calculation?
Because table it is within resizable container and width should be calculated dynamically. See full example...

At the moment i can not reveal a correlation factor and i think this can be calculate dynamically using JavaScript.

Full example on jsfiddle

Answer

That's an IE bug, that happens when using the following CSS styles:

  • border-radius
  • border-bottom-left-radius
  • border-bottom-left-radius
  • border-top-left-radius
  • border-top-right-radius

As a workaround, try turning on IE10 mode on your browser by adding the following metatag <meta http-equiv="X-UA-Compatible" content="IE=10" /> to your page, or try disabling quirks mode with the following page declaration <!DOCTYPE html>

Source

Comments