表格边框溢出到上一页

时间:2018-09-26 10:25:19

标签: html css google-chrome printing

我有以下页面:

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>

问题是,如果表太大而无法容纳在单个页面中,那么我会得到一个奇怪的伪像:

enter image description here

经调查,我确定它是下一页进入上一页的边界的一部分。我设法通过在表样式中添加border-top: 1px来解决此问题,但是我有一个严格的设计要求,即边框必须为2px。

我的问题是,是否有办法阻止这种情况的发生。

0 个答案:

没有答案