css - 无法并排打印表格(水平)

Question

我正在尝试使用这样的 Bootstrap 并排打印表格

但是当我尝试打印预览时，我得到了这个 我的代码如下。我尝试了所有可能的解决方案，但我不知道为什么我无法打印我看到的页面。请指导我解决这个问题。

<style>
.print-wrapper{padding-top:25px;width:768px;margin:0 auto;}.
print .active{font-weight:bold;height:50px;background-color:lightgray;}
</style>
<div class="container">
<div class="print-wrapper well well-lg clearfix">
<div class="col-md-5">
<div class="col-md-12 border-design">
<table align="left" border="1" bordercolor="#CCC" class="table table-condensed print">
<tbody> 
<tr class="active">
<td style="text-align:center">#</td>
<td>Name</td>
</tr>
<tr>
<td>Item 1</td>
<td></td>
</tr>           
<tr>
<td>Item 2</td>
<td></td>
</tr>   
<tr>
<td>Item 3</td>
<td></td>
</tr>
<tr>
<td>Item 4</td>
<td></td>
</tr>
<tr>
<td>Item 5</td>
<td></td>
</tr>
<tr>
</tbody>
</table>    
<p style="text-align:justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut felis non sem vulputate congue. Integer enim mauris, malesuada eu posuere non, semper a ex. Duis at urna id urna egestas ultricies sit amet nec eros. Maecenas in risus ex. Curabitur iaculis quam arcu, vitae pretium massa lacinia vel. Aenean vel rutrum odio. Nulla purus ante, eleifend ut congue non, ornare at nisi. Sed viverra maximus sapien, non condimentum augue blandit finibus. </p>
</div>  
</div>
<div class="col-md-7">
<div class="col-md-12 border-design">
<table align="left" border="1" bordercolor="#CCC" class="table table-condensed print">
<tbody> 
<tr class="active">
<td  colspan="2" style="text-align:center">Customer</td>
</tr>
<tr>
<td width="25%">Name</td>
<td> </td>
</tr>           
<tr>
<td>Address</td>
<td></td>
</tr>   
<tr>
<td>DOB</td>
<td></td>
</tr>
<tr>
<td>Mobile No</td>
<td></td>
</tr>
<tr>
<td>Email</td>
<td></td>
</tr>
</tbody>
</table>
<table align="left" border="1" bordercolor="#CCC" class="table table-condensed print">
<tbody> 
<tr class="active">
<td colspan="2" style="text-align:center">Customer</td>
</tr>
<tr>
<td width="25%">Name</td>
<td></td>
</tr>           
<tr>
<td>Address</td>
<td></td>
</tr>   
<tr>
<td>DOB</td>
<td></td>
</tr>
<tr>
<td>Mobile No</td>
<td></td>
</tr>
<tr>
<td>Email</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>  
</div>

Answer 1

你会想要这样的东西:

<div class="container-fluid">
    <div class="row">
      <div class="col-md-6">
        table 1 html
      </div>
      <div class="col-md-6">
        table 2 html
      </div>
    </div>

    <div class="row">
      <div class="col-md-6">
        text html
      </div>
      <div class="col-md-6">
        table 3 html
      </div>
    </div>
</div>

如您所见，有两行。默认情况下，每行共有 12 列。

因此，表 1 占据了 6/12 列，而表 2 占据了其他 6/12 列。如果表 1 + 表 2 的列之和 > 12，则表 2 将移至第二行。

第二行与第一行完全相同，唯一的区别是 div 的内容。

另请注意，由于您使用的是 col-md，任何小于 md 的显示都会让每个表格占据完整的 12 列。