У меня есть следующая страница:
table {
padding-bottom: 1em;
border: solid 2px #6D6F71;
border-collapse: collapse;
width: 600px;
font-size: 0.7em;
}
th {
background-color: #D9D9D9;
text-align: center;
font-weight: bold;
border: solid 1px #6D6F71;
padding: 0.5em;
}
td {
text-align: right;
border: solid 1px #6D6F71;
padding: 0.5em;
}
th, td {
margin: 0;
}
<table>
<thead>
<tr>
<th rowspan="3">Code</th>
<th>First title</th>
<th>This is the title which is very very very very very very very very very very very very very very long</th>
<th>This is the title</th>
<th>This is the title which is very very very very very very very very long</th>
</tr>
<tr>
<th>This is the subtitle</th>
<th>This is the subtitle</th>
<th>This is the subtitle</th>
<th>This is the subtitle</th>
</tr>
<tr>
<th>This is the subtitle</th>
<th>This is the subtitle</th>
<th>This is the subtitle</th>
<th>This is the subtitle</th>
</tr>
</theDd>
<tbody>
<tr>
<th>A</th>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<th>Many</th>
<td>more</td>
<td>rows</td>
<td>like</td>
<td>this one</td>
</tr>
</tbody>
</table>
Проблема в том, что если таблица достаточно велика, чтобы не поместиться на одной странице, то я получаю странный артефакт:

После исследования я определил, что это часть границы следующей страницы, переходящей в предыдущую.Мне удалось это исправить, добавив border-top: 1px
к стилю таблицы, но у меня есть строгое требование к дизайну, что граница должна быть 2px.
Мой вопрос: есть ли способ предотвратить это?