Why is a row, in a table with border radius, overlapping the rounded corners in IE11?

Question

I created a table with border-radius. But when checking this in IE11 it shows as if the borders aren't rounded. If I up the value of the border and border-radius, it shows clearly that the row is overlapping the table border.

I have tried the meta tag http-equiv="X-UA-Compatible" and changed the “Compatibility View” settings. but without avail.

 th { background-color: #3771c9; color: #ffffff; font-weight: bold; line-height: 20px; padding: 5px 2px; word-break: break-all; overflow-wrap: break-word; word-break: break-word; } table { width: 80%; margin: 0 auto; border-radius: 40px; overflow: hidden; border-collapse: separate; border-spacing: 0; border: 5px solid red; table-layout: fixed; } 

 <table class="size-table__table"> <tbody> <tr class="size-table__size-row size-row size-row--header"> <th class="size-row__header">test1</th> <th class="size-row__header">test2</th> <th class="size-row__header">test3</th> <th class="size-row__header">test4</th> <th class="size-row__header">test4</th> </tr> <tr class="size-table__size-row size-row size-row--data"> <td class="size-row__data"><a class="size-row__link" href="#">185</a></td> <td class="size-row__data"><a class="size-row__link" href="#">70</a></td> <td class="size-row__data"><a class="size-row__link" href="#">R14</a></td> <td class="size-row__data"><a class="size-row__link" href="#">88</a></td> <td class="size-row__data"><a class="size-row__link" href="#">T</a></td> </tr> <tr class="size-table__size-row size-row size-row--data"> <td class="size-row__data"><a class="size-row__link" href="#">185</a></td> <td class="size-row__data"><a class="size-row__link" href="#">65</a></td> <td class="size-row__data"><a class="size-row__link" href="#">R15</a></td> <td class="size-row__data"><a class="size-row__link" href="#">88</a></td> <td class="size-row__data"><a class="size-row__link" href="#">T</a></td> </tr> </tbody> </table> 

I have this fiddle which shows my problem. https://jsfiddle.net/b05vyhxo/1/

Check that Chrome shows a rounded table and notice on IE11 the border being overlapped. I can probably solve this by making my first and the last row having a border. But I'm also eager to know why this isn't working, especially since I couldn't find any solution to keep the border on the table, which seems normal to be done, even for IE11.

UPDATE

Thanks G-cyr running IE11 for helping me. Your solution fixed this.

adding:

table {
  display: block;
}

tbody {
      display: table;
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
    }

did the trick to show rounded corners on IE11.

Answer 1

I have tested your code with IE 11 and Microsoft Edge browser and I am able to reproduce the problem. It can be possible that it is some kind of bug or it is IE/Edge default behavior. I will try to submit the feedback regarding this issue.

As a workaround, I think we could set the border-radius property for the cells in the four corners, code as below:

<style>
    th {
        background-color: #3771c9;
        color: #ffffff;
        font-weight: bold;
        line-height: 20px;
        padding: 5px 2px;
        word-break: break-all;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    table {
        width: 80%;
        margin: 0 auto;
        border-radius: 40px;
        overflow: hidden;
        border-collapse: separate;
        border-spacing: 0;
        border: 5px solid red;
        table-layout: fixed;
        text-align: center;
    }
</style>
<table class="size-table__table">
    <tbody>
        <tr class="size-table__size-row size-row size-row--header">
            <th class="size-row__header" style="border-radius: 40px 0px 0px 0px">test1</th>
            <th class="size-row__header">test2</th>
            <th class="size-row__header">test3</th>
            <th class="size-row__header">test4</th>
            <th class="size-row__header" style="border-radius: 0px 40px 0px 0px">test4</th>
        </tr>


        <tr class="size-table__size-row size-row size-row--data">
            <td class="size-row__data"><a class="size-row__link" href="#">185</a></td>
            <td class="size-row__data"><a class="size-row__link" href="#">70</a></td>
            <td class="size-row__data"><a class="size-row__link" href="#">R14</a></td>
            <td class="size-row__data"><a class="size-row__link" href="#">88</a></td>
            <td class="size-row__data"><a class="size-row__link" href="#">T</a></td>
        </tr>


        <tr class="size-table__size-row size-row size-row--data">
            <td class="size-row__data" style="border-radius: 0px 0px 0px 40px"><a class="size-row__link" href="#">185</a></td>
            <td class="size-row__data"><a class="size-row__link" href="#">65</a></td>
            <td class="size-row__data"><a class="size-row__link" href="#">R15</a></td>
            <td class="size-row__data"><a class="size-row__link" href="#">88</a></td>
            <td class="size-row__data" style="border-radius: 0px 0px 40px 0px"><a class="size-row__link" href="#">T</a></td>
        </tr>
    </tbody>
</table>

The result in IE browser as below:

Edit:

You could also use the following CSS style:

<style>
    th {
        background-color: #3771c9;
        color: #ffffff;
        font-weight: bold;
        line-height: 20px;
        padding: 5px 2px;
        word-break: break-all;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    table {
        width: 80%;
        margin: 0 auto;
        border-radius: 40px;
        overflow: hidden;
        border-collapse: separate;
        border-spacing: 0;
        border: 5px solid red;
        table-layout: fixed;
        text-align: center;
    }
        table tr:first-child th:first-child {
            border-radius: 40px 0px 0px 0px;
        }
        table tr:first-child th:last-child {
            border-radius: 0px 40px 0px 0px;
        }

        table tr:last-child td:first-child {
            border-radius: 0px 0px 0px 40px;
        }
        table tr:last-child td:last-child {
            border-radius: 0px 0px 40px 0px;
        }
</style>

Answer 2

You can use a wrapper to avoid this buggy behavior or reset display on table and tbody here in your case since thead and tfoot are not used:

 th { background-color: #3771c9; color: #ffffff; font-weight: bold; line-height: 20px; padding: 5px 2px; word-break: break-all; overflow-wrap: break-word; word-break: break-word; } table { width: 80%; margin: 0 auto; border-radius: 40px; overflow: hidden; border: 5px solid red; display:block; } tbody { display: table; width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; } th, td {padding:0 22px;}/* push away from border-radius */ 

 <table class="size-table__table"> <tbody> <tr class="size-table__size-row size-row size-row--header"> <th class="size-row__header">test1</th> <th class="size-row__header">test2</th> <th class="size-row__header">test3</th> <th class="size-row__header">test4</th> <th class="size-row__header">test4</th> </tr> <tr class="size-table__size-row size-row size-row--data"> <td class="size-row__data"><a class="size-row__link" href="#">185</a></td> <td class="size-row__data"><a class="size-row__link" href="#">70</a></td> <td class="size-row__data"><a class="size-row__link" href="#">R14</a></td> <td class="size-row__data"><a class="size-row__link" href="#">88</a></td> <td class="size-row__data"><a class="size-row__link" href="#">T</a></td> </tr> <tr class="size-table__size-row size-row size-row--data"> <td class="size-row__data"><a class="size-row__link" href="#">185</a></td> <td class="size-row__data"><a class="size-row__link" href="#">65</a></td> <td class="size-row__data"><a class="size-row__link" href="#">R15</a></td> <td class="size-row__data"><a class="size-row__link" href="#">88</a></td> <td class="size-row__data"><a class="size-row__link" href="#">T</a></td> </tr> </tbody> </table> <p><strong>Note:</strong> if <code>tbody</code> is not written in the HTML code, the browser generates it anyway. <i>(=> browsers always try as possible to fix code miswritten or when tags are missing)</i>. Demo below without the tbody tag in the code but still here.</p> <table class="size-table__table"> <tr class="size-table__size-row size-row size-row--header"> <th class="size-row__header">test1</th> <th class="size-row__header">test2</th> <th class="size-row__header">test3</th> <th class="size-row__header">test4</th> <th class="size-row__header">test4</th> </tr> <tr class="size-table__size-row size-row size-row--data"> <td class="size-row__data"><a class="size-row__link" href="#">185</a></td> <td class="size-row__data"><a class="size-row__link" href="#">70</a></td> <td class="size-row__data"><a class="size-row__link" href="#">R14</a></td> <td class="size-row__data"><a class="size-row__link" href="#">88</a></td> <td class="size-row__data"><a class="size-row__link" href="#">T</a></td> </tr> <tr class="size-table__size-row size-row size-row--data"> <td class="size-row__data"><a class="size-row__link" href="#">185</a></td> <td class="size-row__data"><a class="size-row__link" href="#">65</a></td> <td class="size-row__data"><a class="size-row__link" href="#">R15</a></td> <td class="size-row__data"><a class="size-row__link" href="#">88</a></td> <td class="size-row__data"><a class="size-row__link" href="#">T</a></td> </tr> </table> 

no need to add a screen, trust my pseudo ;)