Menu
So I've been dealing with an issue with printing table elements in IE 10 only, where portions of the border will be missing/cutoff. The weird part is that looks to be only the first row of the tbody, and only the first and last cells of that row are affected.
Here some of the things I have found so far:
Here's a test page that I wrote that shows the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
table {
border-collapse: collapse;
border: 2px solid black;
}
td {
border: 1px solid black;
}
th {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Date</th>
<th>Type</th>
<th>Champion</th>
<th>Note</th>
</tr>
</thead>
<tbody>
<tr>
<td>UI Team Meeting</td>
<td>3/5/2013 1:00 PM</td>
<td>User Interface</td>
<td>John Doe</td>
<td></td>
</tr>
<tr>
<td>PM Meeting</td>
<td>3/4/2013 10:00 AM</td>
<td>PMs</td>
<td>Jane Doe</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
So has anyone else seen this before and has found a solution? I haven't even been able to find anyone else talking about this issue.
Thanks!
416
I came across a similar issue in IE 9. The top half of the border on the first row of the first table on a page would not appear on the paper version of the page. When I load your code I see the same symptom.
I worked around our problem by combining the border rules for the table, th, and td into a single rule. The trick appears to work for yours as well, but it means the outer border will be the same size as the inner border:
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
