无法并排打印表格（水平）

Question

我正在尝试使用像MSDN documentation for VS 2015

这样的引导程序并排打印表格

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

<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列。