Kann nicht die Tabellen nebeneinander drucken (horizontal)

Question

Ich versuche, die Tabellen nebeneinander drucken mit Bootstrap-ähnlichen

aber wenn ich versuche, Vorschau zu drucken, erhalte ich diese Mein Code ist unten angegeben. Ich habe alle möglichen Lösungen ausprobiert, aber ich weiß nicht, warum ich die Seite, die ich sehe, nicht ausdrucken kann. Bitte führen Sie mich bei der Lösung dieses Problems.

<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

Sie würden so etwas wie dies wollen:

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

Wie Sie sehen können gibt es zwei getrennte Reihen zu sehen. Jede Zeile hat standardmäßig insgesamt 12 Spalten.

Daher haben Tabelle 1 6/12 Spalten und Tabelle 2 die anderen 6/12 Spalten. Wenn die Summe der Spalten von Tabelle 1 + Tabelle 2> 12 ist, wird Tabelle 2 in die zweite Zeile verschoben.

Die zweite Zeile ist genau die gleiche wie die erste, der einzige Unterschied ist der Inhalt der divs.

Beachten Sie auch, da Sie col-md verwenden, jede Anzeige, die kleiner als MD ist, wird jede Tabelle die vollen 12 Spalten aufnehmen.