Bootstrap @media 打印响应表

Posted 2023-03-06

【中文标题】Bootstrap @media 打印响应表

【英文标题】：Bootstrap @media print responsive-table

【发布时间】：2017-01-13 12:29:47

【问题描述】：

我有一些 @media print 用于打印我的页面内容，但是当我尝试 ptint 我的页面表截断时，我遇到了 boostrap 类 .responsive-table 的问题？

我有一些解决方案可以在引导程序中打印响应表 这是我现在的 CSS

@media print   
#top-navigation
display:none !important;

footer
display:none !important;

.main-footer-sub
display:none !important;

a[href]:after 
content: none !important;


.hotel-detail-sidebar
display: none !important;


#menu-navigation
display:none !important;

#carousel
display:none !important;

#preporuka-agencije
display:none !important;

#preporuka-agencije
display:none !important;

#offers-sugessted
display:none !important;

#share-buttons
display:none !important;

.tab-content > .tab-pane 
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;

.responsive-tabs
display:none !important;

.sattravel-kontakt
display:none !important;
.table-responsive
overflow:visible !important;

 *,
  *:before,enter code here
  *:after 
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    -webkit-box-shadow: none !important;
            box-shadow: none !important;
  
  a,
  a:visited 
    text-decoration: underline;
  
  a[href]:after 
    content: " (" attr(href) ")";
  
  abbr[title]:after 
    content: " (" attr(title) ")";
  
  a[href^="#"]:after,
  a[href^="javascript:"]:after 
    content: "";
  
  pre,
  blockquote 
    border: 1px solid #999;

    page-break-inside: avoid;
  
  thead 
    display: table-header-group;
  
  tr,
  img 
    page-break-inside: avoid;
  
  img 
    max-width: 100% !important;
  
  p,
  h2,
  h3 
    orphans: 3;
    widows: 3;
  
  h2,
  h3 
    page-break-after: avoid;
  
  select 
    background: #fff !important;
  
  .navbar 
    display: none;
  
  .btn > .caret,
  .dropup > .btn > .caret 
    border-top-color: #000 !important;
  
  .label 
    border: 1px solid #000;
  
  .table 
    border-collapse: collapse !important;
  
  .table td,
  .table th 
    background-color: #fff !important;
  
  .table-bordered th,
  .table-bordered td 
    border: 1px solid #ddd !important;
  
    .container 
    width:100% !important;
  

【问题讨论】：

见blog.donnierayjones.com/2014/10/fix-bootstrap3-printing

【参考方案1】：

我的最佳解决方案

只需将主table 与外部table.tabel-responsive 包裹起来

HTML

<table class="table table-responsive">
    <tr>
        <td>
            <!-- TABLE TO PRINT -->
            <table id="attendance_table"  class="table table-bordered  bg-warning-o-10">
            </table>
        </td>
    </tr>
</table>

CSS

@media print 
    body * 
      visibility: hidden;
    
    #attendance_table, #attendance_table * 
      visibility: visible;
    
    #attendance_table 
      position: absolute;
      left: 0;
      top: 0;