2017-09-22 1 views
-5

내 HTML에 여러 행이있는 표가 있습니다. HTML이 인쇄되면 표가 반으로 잘리고 다음 페이지에 여분의 행이 인쇄됩니다. 테이블을 두 개로 나누고 동일한 페이지의 서로 옆에 세로로 표시하는 방법이 있습니까? 나는 두 가지로 테이블을 분할과 수직으로 서로 옆에 그들을 표시하여 같은 페이지에있는 모든 행을 표시하려고인쇄 할 때 HTML 표를 반으로 나누고 한 페이지에 표시하는 방법

#wrapTable { 
 
    width: auto; 
 
    border: 0px solid; 
 
    display: block; 
 
}
<div style="margin:0"> 
 
    <table id="wrapTable"> 
 
    <tr> 
 
     <th> Col1 </th> 
 
     <th> Col2 </th> 
 
     <th> Col3 </th> 
 
    </tr> 
 
    <tr> 
 
     <td> Row1 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row2 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row3 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row4 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row5 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row6 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row7 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row8 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row9 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row10 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    </table> 
 
    <table id="wrapTable"> 
 
    <tr> 
 
     <td> Row11 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row12 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row13 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row14 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row15 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row16 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row17 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row18 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row19 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row20 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    </table> 
 
</div>

: 여기

는 HTML입니다.

+1

당신이 시도 코드와 무슨 일이 일어나고 있는지에 관해서는 더 나은 explination을 제공하십시오. jsfiddle.net도 도움이 될 것입니다. 귀하의 질문에 대답하기 위해서는 아마도 방법이있을 것입니다. – Gezzasa

+0

CSS가있는 미디어 쿼리를 사용하면 화면에 인쇄하는 것과는 다르게 표를 표시 할 수 있지만 HTML을 제공하지 않으면 사용자에게 도움을 줄 수 없습니다. – freginold

+0

질문 수정을 위해 @freginold에 감사드립니다. – Sugan88

답변

1

CSS 속성 "display : inline"을 사용하여 원하는 결과를 얻었습니다.

#wrapTable { 
 
    width: auto; 
 
    border: 0px solid; 
 
    display: inline; 
 
}
<div style="margin:0"> 
 
    <table id="wrapTable"> 
 
    <tr> 
 
     <th> Col1 </th> 
 
     <th> Col2 </th> 
 
     <th> Col3 </th> 
 
    </tr> 
 
    <tr> 
 
     <td> Row1 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row2 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row3 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row4 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row5 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row6 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row7 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row8 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row9 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row10 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    </table> 
 
    <table id="wrapTable"> 
 
    <tr> 
 
     <th> Col1 </th> 
 
     <th> Col2 </th> 
 
     <th> Col3 </th> 
 
    </tr> 
 
    <tr> 
 
     <td> Row11 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row12 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row13 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row14 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row15 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row16 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row17 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row18 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row19 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    <tr> 
 
     <td> Row20 </td> 
 
     <td> </td> 
 
     <td> </td> 
 
    </tr> 
 
    </table> 
 
</div>