Here is the sample code:
<html>
<head>
<title> IE11 </title>
<style>
*{
margin: 0;
padding: 0;
}
table{
table-layout: fixed;
border-collapse: collapse;
border-left: 1px solid black;
border-right: 1px solid black;
}
td{
text-align: center;
border-bottom: 1px solid black;
border-right: 1px solid black;
padding: 0 0 0 0;
overflow: hidden;
}
</style>
</head>
<body>
<table width="400px">
<tr>
<td>
<table width="400px">
<tr>
<td style="width:100px">
col1
</td>
<td style="width:100px">
col2
</td>
<td style="width:100px">
col3
</td>
<td style="width:100px">
col4
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="400px">
<tr>
<td style="width:100px">
col1
</td>
<td colspan="2" style="width:200px">
col2 col3
</td>
<td style="width:100px">
col4
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
In IE10 and IE11, there is an 1 pixel shift in the merged columns:
https://i.sstatic.net/GSNMK.png
But when I run it in IE6-9 or in IE11 with Edge=5, it renders perfectly.
https://i.sstatic.net/NRhKE.png
It is barely noticeable, but when the elements of td of main table is large, it's very irritating. How can I fix this?
Thanks in advance.
It depends on how width is calculated including borders or not.
You can solve this using box-sizing css property:
td{
box-sizing: border-box;
}