为什么在 IE11 中有一行 table 的边框半径与圆角重叠？
Why is a row, in a table with border radius, overlapping the rounded corners in IE11?
我创建了一个带边框半径的 table。但是在 IE11 中检查时，它显示好像边框没有圆角。如果我提高边框和边框半径的值，它清楚地表明该行与 table 边框重叠。
我尝试了元标记 http-equiv="X-UA-Compatible" 并更改了“兼容性视图”设置。但无济于事。
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>
我有这个 fiddle，它显示了我的问题。
https://jsfiddle.net/b05vyhxo/1/
检查 Chrome 是否显示圆角 table 并注意 IE11 上的边框重叠。我可以通过让我的第一行和最后一行有边框来解决这个问题。但我也很想知道为什么这不起作用，特别是因为我找不到任何解决方案来将边框保持在 table 上，这似乎是正常的，即使对于 IE11 也是如此。
更新
感谢G-cyr 运行 IE11 对我的帮助。您的解决方案解决了这个问题。
添加：
table {
display: block;
}
tbody {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
在 IE11 上显示圆角的技巧。
我已经使用 IE 11 和 Microsoft Edge 浏览器测试了您的代码，我能够重现该问题。它可能是某种错误或者是 IE/Edge 默认行为。我会尝试提交有关此问题的反馈。
作为解决方法，我认为我们可以为四个角的单元格设置border-radius 属性，代码如下：
<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>
在IE浏览器中的结果如下：
编辑：
您还可以使用以下 CSS 样式：
<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>
您可以使用包装器来避免这种错误行为，或者在 table 和 tbody 上重置 display，因为 thead 和 tfoot未使用：
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>
不用加屏，相信我的伪;)
我创建了一个带边框半径的 table。但是在 IE11 中检查时，它显示好像边框没有圆角。如果我提高边框和边框半径的值，它清楚地表明该行与 table 边框重叠。
我尝试了元标记 http-equiv="X-UA-Compatible" 并更改了“兼容性视图”设置。但无济于事。
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>
我有这个 fiddle，它显示了我的问题。 https://jsfiddle.net/b05vyhxo/1/
检查 Chrome 是否显示圆角 table 并注意 IE11 上的边框重叠。我可以通过让我的第一行和最后一行有边框来解决这个问题。但我也很想知道为什么这不起作用，特别是因为我找不到任何解决方案来将边框保持在 table 上，这似乎是正常的，即使对于 IE11 也是如此。
更新
感谢G-cyr 运行 IE11 对我的帮助。您的解决方案解决了这个问题。
添加：
table {
display: block;
}
tbody {
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
}
在 IE11 上显示圆角的技巧。
我已经使用 IE 11 和 Microsoft Edge 浏览器测试了您的代码，我能够重现该问题。它可能是某种错误或者是 IE/Edge 默认行为。我会尝试提交有关此问题的反馈。
作为解决方法，我认为我们可以为四个角的单元格设置border-radius 属性，代码如下：
<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>
在IE浏览器中的结果如下：
编辑：
您还可以使用以下 CSS 样式：
<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>
您可以使用包装器来避免这种错误行为，或者在 table 和 tbody 上重置 display，因为 thead 和 tfoot未使用：
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>
不用加屏，相信我的伪;)