[英]Why is a row, in a table with border radius, overlapping the rounded corners in IE11?
I created a table with border-radius. 我创建了一个带有边框半径的表。 But when checking this in IE11 it shows as if the borders aren't rounded. 但是,当在IE11中进行检查时,它显示出边框好像没有圆角。 If I up the value of the border and border-radius, it shows clearly that the row is overlapping the table border. 如果我增加border和border-radius的值,则可以清楚地表明该行与表格边框重叠。
I have tried the meta tag http-equiv="X-UA-Compatible"
and changed the “Compatibility View” settings. 我尝试了元标记http-equiv="X-UA-Compatible"
并更改了“兼容性视图”设置。 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/ https://jsfiddle.net/b05vyhxo/1/
Check that Chrome shows a rounded table and notice on IE11 the border being overlapped. 检查Chrome是否显示了圆桌表,并在IE11上注意边框是否重叠。 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. 但是我也很想知道为什么这行不通,特别是因为我找不到任何解决办法来保持边界在桌子上,即使对于IE11来说,这似乎也是正常的。
UPDATE 更新
Thanks G-cyr running IE11 for helping me. 感谢运行IE11的G-cyr对我的帮助。 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. 巧妙地在IE11上显示圆角。
I have tested your code with IE 11 and Microsoft Edge browser and I am able to reproduce the problem. 我已经使用IE 11和Microsoft Edge浏览器测试了您的代码,并且能够重现该问题。 It can be possible that it is some kind of bug or it is IE/Edge default behavior. 它可能是某种错误,或者是IE / Edge默认行为。 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: 作为一种解决方法,我认为我们可以在四个角中为单元格设置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>
The result in IE browser as below: 在IE浏览器中的结果如下:
Edit: 编辑:
You could also use the following CSS style: 您还可以使用以下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>
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: 由于不使用thead
和tfoot
因此可以使用包装器来避免这种错误行为,也可以在此处根据需要重置table
和tbody
上的display
:
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 ;) 无需添加屏幕,请相信我的伪;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.