인쇄, 테이블이 가로 및 세로 방향으로 응답하지 않습니다.

Question

데이터 집합을 표시하는 테이블이 있습니다. 그러나 컨트롤 + 또는 window.print();을 사용하여 페이지를 인쇄하려고하면 테이블 너비가 세로 또는 가로 방향에 응답하지 않습니다. 테이블 너비가 용지 ​​너비를 초과합니다. 이 문제를 어떻게 해결할 수 있습니까?

내 테이블 마크 업 :

<table class="datatable"> 
      <thead> 
       <tr> 
        <th class="sorting" width="15">ID</th> 
        <th class="sorting" width="15">Type</th> 
        <th class="sorting" width="30">Property Type</th> 
        <th class="sorting" width="50">Name/Address</th> 
        <th class="sorting" width="10">Block</th> 
        <th class="sorting" width="35">Unit</th> 
        <th class="sorting" width="35">Sqft</th> 
        <th class="sorting" width="35">$</th> 
        <th class="sorting" width="35">$/Sqft</th> 
              <th class="sorting" width="35">R.Yield</th> 
              <th class="sorting" width="35">Status</th> 
       </tr> 
      </thead> 
      <tbody> 

       <tr id="listing1" class="odd"> 
        <td class="sorting_1">1</td> 
        <td>Sale</td> 
        <td>Apartment/Condo</td> 
        <td> 
         <a href="/index.php/listings/view/7" title="Parc Rosewood">Parc Rosewood</a>       <br /> 
         Default Administrator (12345678) 
        </td> 
        <td>10</td> 
        <td>08-90</td> 
        <td>227</td> 
        <td>$2,170,000</td> 
        <td>$9,559</td> 
        <td> 
         1%      </td> 
        <td> 
         Available      </td> 
       </tr> 

       <tr id="listing2" class="even"> 
        <td class="sorting_1">2</td> 
        <td>Sale</td> 
        <td>Apartment/Condo</td> 
        <td> 
         <a href="/index.php/listings/view/3" title="Woodgrove Condo">Woodgrove Condo</a>       <br /> 
         John Doe (12345678) 
        </td> 
        <td>5</td> 
        <td>03-12</td> 
        <td>2,360</td> 
        <td>$1,900,000</td> 
        <td>$805</td> 
        <td> 
         --      </td> 
        <td> 
         Available      </td> 
       </tr> 

       <tr id="listing3" class="odd"> 
        <td class="sorting_1">3</td> 
        <td>Sale</td> 
        <td>Apartment/Condo</td> 
        <td> 
         <a href="/index.php/listings/view/2" title="Casablanca">Casablanca</a>       <br /> 
         John Champion (12345678) 
        </td> 
        <td>7</td> 
        <td>01-36</td> 
        <td>1,326</td> 
        <td>$1,000,000</td> 
        <td>$754</td> 
        <td> 
         --      </td> 
        <td> 
         Available      </td> 
       </tr> 

      </tbody> 
     </table> 

CSS 마크 업 :

table { 
    margin: 20px 0px 10px 0px; 
    padding: 0px; 
    border-collapse:collapse; 
    border-spacing: 0px; 
    width: 100%; 
} 
thead th { text-align: left; padding: 2px 5px; border-bottom: 1px solid #E0E0E0; } 

스크린 샷 :

Answer 1

는, 내 래퍼 광대 같은 모양을 만드는 것 같다.

HTML을 마크 업

<div class="wrapper"> 
    <div class="container"> 
      <div class="row"> 

CSS 마크 업

.row { 
    width: 100%; 
    max-width: 1440px; 
    min-width: 1200px; 
    margin: 0px auto; 
} 

올바른 CSS 마크 업 모든 도움을

.row { 
    width: 100%; 
    margin: 0px auto; 
} 

감사합니다 (인쇄 미디어 쿼리에 이렇게)!

Answer 2

귀하의 코드가 정확하고 테이블 폭 FF 테스트 좋게 인쇄 미리보기 (에 확장, IE9, Chrome ... A4에 인쇄, 100 %로 축소 - 축소 없음). 프린터 기본 설정 및 브라우저 인쇄 기본 설정 (페이지 설정 및 배율)을 확인하십시오.

Answer 3

CSS를 인쇄용으로 조정하려면 "@ 미디어 인쇄"규칙을 열어야합니다.

는

예 : 나는 해결책을 발견

@media print { 
    /* any css rule */ 
    table { 
    margin: 20px 0px 10px 0px; 
    padding: 0px; 
    border-collapse:collapse; 
    border-spacing: 0px; 
    width: 100%; 
    } 
    thead th { text-align: left; padding: 2px 5px; border-bottom: 1px solid #E0E0E0; } 
}