我有一个包含8个小表的网页，该页面不会为用户显示，当用户单击“打印”按钮时，我将从数据库中动态填充该页面，设计该页面，一切都很好，但是当我单击时在打印按钮上，我失去了所有的CSS设计，并且每个表都将排在一行中。
media="all"属性中添加<link>，但是没有用。Desired printed page should be like this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" media="all"/>
</head>
<body>
<div class="container-fluid">
<button onclick="myFunction()">Print this page</button>
<script>
function myFunction() {
window.print();
}
</script>
<div class="row">
<div class="col-sm-4">
<table class="table table-bordered">
<tbody> <tr> <td> Branch </td> <td> AS </td> </tr> <tr> <td> Loan Type </td> <td>SA</td> </tr></tbody>
</table>
</div>
</div>
<p>Informations</p>
<div class="row">
<div class="col-sm-1">
<table class="table table-bordered">
<tbody>
<tr>
<td> ID # </td>
<td>SA</td>
</tr>
<tr>
<td> Name </td>
<td>SA </td>
</tr>
<tr>
<td> Gender </td>
<td>SA</td>
</tr>
<tr>
<td> Birth Date </td>
<td>SA </td>
</tr>
<tr>
<td> Mother </td>
<td>SA</td>
</tr>
<tr>
<td> Address </td>
<td>SA </td>
</tr>
<tr>
<td> Tel # </td>
<td>SA</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-1"> </div>
<div class="col-sm-4">
<table class="table table-bordered">
<tbody>
<tr>
<td> Job </td>
<td>SA </td>
</tr>
<tr>
<td> Funder Type </td>
<td>SA</td>
</tr>
<tr>
<td> Martial Status </td>
<td>SA </td>
</tr>
<tr>
<td> Place Of Birth </td>
<td>SA</td>
</tr>
<tr>
<td> J </td>
<td>SA </td>
</tr>
</tbody>
</table>
</div>
</div>
<p> Financial Information </p>
<div class="row">
<div class="col-sm-4">
<table class="table table-bordered">
<tbody>
<tr>
<td> Active Date </td>
<td>SA</td>
</tr>
<tr>
<td> Total Amount </td>
<td>SA </td>
</tr>
<tr>
<td> To Pay </td>
<td>SA</td>
</tr>
<tr>
<td> Bussniess </td>
<td>SA </td>
</tr>
<tr>
<td> Mother </td>
<td>SA</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-4">
<table class="table table-bordered">
<tbody>
<tr>
<td> Job </td>
<td>SA </td>
</tr>
<tr>
<td> Funder Type </td>
<td>SA</td>
</tr>
<tr>
<td> Martial Status </td>
<td>SA </td>
</tr>
<tr>
<td> Place Of Birth </td>
<td>SA</td>
</tr>
</tbody>
</table>
</div>
<div class="col-sm-4">
<table class="table table-bordered">
<tbody>
<tr>
<td> Job </td>
<td>SA </td>
</tr>
<tr>
<td> Funder Type </td>
<td>SA</td>
</tr>
</tbody>
</table>
</div>
</div>
<p> Financial Information </p>
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="7" class="text-center"> Garantees </td>
</tr>
<tr>
<td> Sign </td>
<td>Name </td>
<td> Amount </td>
<td> Currency </td>
</tr>
<tr>
<td> Sign </td>
<td>Name </td>
<td> Amount </td>
<td> Currency </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table class="table table-bordered">
<tbody>
<tr>
<td colspan="7" class="text-center"> Garantores </td>
</tr>
<tr>
<td> Sign </td>
<td>Name </td>
<td> Amount </td>
<td> Currency </td>
<td>Name </td>
<td> Amount </td>
<td> Currency </td>
</tr>
<tr>
<td> Sign </td>
<td>Name </td>
<td> Amount </td>
<td> Currency </td>
<td>Name </td>
<td> Amount </td>
<td> Currency </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>