我有以下页面:
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。
我的问题是,是否有办法阻止这种情况的发生。