Page Ratio in html5

-1

I have an html code that I'm using to send email through phpmailer. The problem is that the background of the page is very large and I would like to know if I can narrow it down. Here is the code for the page:

<!DOCTYPE html>
<html lang='pt-br'>
	<head>
		<meta charset='utf-8'>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta name='viewport' content='width=device-width, initial-scale=1'>
		<title>Bootstrap CRUD Data Table for Database with Modal Form</title>
		<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto|Varela+Round'>
		<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
		<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
		<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
		<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
		<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
    <style type='text/css'>
    body {
			color: #566787;
			background: #70879a;
			font-family: 'Varela Round', sans-serif;
			font-size: 13px;
			}
			
			.table-wrapper {
			background: #fff;
			padding: 20px 25px;
			margin: 30px 25%;
			border-radius: 3px;
			box-shadow: 0 1px 1px rgba(0,0,0,.05);
			}
			
			.table-title {
			padding-bottom: 15px;
			background: #435d7d;
			color: #fff;
			padding: 16px 30px;
			margin: -20px -5% 10px;
			border-radius: 3px 3px 0 0;
			}
			.table-title h2 {
			margin: 5px 0 0;
			font-size: 24px;
			}
			.table-title .btn-group {
			float: right;
			}
			.table-title .btn {
			color: #fff;
			float: right;
			font-size: 13px;
			border: none;
			min-width: 50px;
			border-radius: 2px;
			border: none;
			outline: none !important;
			margin-left: 10px;
			}
			.table-title .btn i {
			float: left;
			font-size: 21px;
			margin-right: 5px;
			}
			.table-title .btn span {
			float: left;
			margin-top: 2px;
			}
			table.table tr th, table.table tr td {
			border-color: #e9e9e9;
			padding: 12px 15px;
			vertical-align: middle;
			}
			table.table tr th:first-child {
			width: 60px;
			}
			table.table tr th:last-child {
			width: 100px;
			}
			
			{
			background-color:transparent !important;
			}
			
			table.table-striped.table-hover tbody tr:hover {
			background: #f5f5f5;
			}
			table.table th i {
			font-size: 13px;
			margin: 0 5px;
			cursor: pointer;
			}	
			table.table td:last-child i {
			opacity: 0.9;
			font-size: 22px;
			margin: 0 5px;
			}
			table.table td a {
			font-weight: bold;
			color: #566787;
			display: inline-block;
			text-decoration: none;
			outline: none !important;
			}
			table.table td a:hover {
			color: #2196F3;
			}
			table.table td a.edit {
			color: #FFC107;
			}
			table.table td a.delete {
			color: #F44336;
			}
			table.table td i {
			font-size: 19px;
			}
			table.table .avatar {
			border-radius: 50%;
			vertical-align: middle;
			margin-right: 10px;
			}
			.pagination {
			float: right;
			margin: 0 0 5px;
			}
			.pagination li a {
			border: none;
			font-size: 13px;
			min-width: 30px;
			min-height: 30px;
			color: #999;
			margin: 0 2px;
			line-height: 30px;
			border-radius: 2px !important;
			text-align: center;
			padding: 0 6px;
			}
			.pagination li a:hover {
			color: #666;
			}	
			.pagination li.active a, .pagination li.active a.page-link {
			background: #03A9F4;
			}
			.pagination li.active a:hover {        
			background: #0397d6;
			}
			.pagination li.disabled i {
			color: #ccc;
			}
			.pagination li i {
			font-size: 16px;
			padding-top: 6px
			}
			.hint-text {
			float: left;
			margin-top: 10px;
			font-size: 13px;
			}    
			/* Custom checkbox */
			.custom-checkbox {
			position: relative;
			}
			.custom-checkbox input[type='checkbox'] {    
			opacity: 0;
			position: absolute;
			margin: 5px 0 0 3px;
			z-index: 9;
			}
			.custom-checkbox label:before{
			width: 18px;
			height: 18px;
			}
			.custom-checkbox label:before {
			content: '';
			margin-right: 10px;
			display: inline-block;
			vertical-align: text-top;
			background: white;
			border: 1px solid #bbb;
			border-radius: 2px;
			box-sizing: border-box;
			z-index: 2;
			}
			.custom-checkbox input[type='checkbox']:checked + label:after {
			content: '';
			position: absolute;
			left: 6px;
			top: 3px;
			width: 6px;
			height: 11px;
			border: solid #000;
			border-width: 0 3px 3px 0;
			transform: inherit;
			z-index: 3;
			transform: rotateZ(45deg);
			}
			.custom-checkbox input[type='checkbox']:checked + label:before {
			border-color: #03A9F4;
			background: #03A9F4;
			}
			.custom-checkbox input[type='checkbox']:checked + label:after {
			border-color: #fff;
			}
			.custom-checkbox input[type='checkbox']:disabled + label:before {
			color: #b8b8b8;
			cursor: auto;
			box-shadow: none;
			background: #ddd;
			}
			/* Modal styles */
			.modal .modal-dialog {
			max-width: 400px;
			}
			.modal .modal-header, .modal .modal-body, .modal .modal-footer {
			padding: 20px 30px;
			}
			.modal .modal-content {
			border-radius: 3px;
			}
			.modal .modal-footer {
			background: #ecf0f1;
			border-radius: 0 0 3px 3px;
			}
			.modal .modal-title {
			display: inline-block;
			}
			.modal .form-control {
			border-radius: 2px;
			box-shadow: none;
			border-color: #dddddd;
			}
			.modal textarea.form-control {
			resize: vertical;
			}
			.modal .btn {
			border-radius: 2px;
			min-width: 100px;
			}	
			.modal form label {
			font-weight: normal;
			}	
			
			.container-non-responsive {
			/* Margin/padding copied from Bootstrap */
			margin-left: auto;
			margin-right: auto;
			padding-left: 15px;
			padding-right: 15px;
			align: center;
			
			/* Set width to your desired site width */
			width: 1170px;
			}
		</style>
	</head>
	<body>
		<div class='container-non-responsive'>
			<div class='table-wrapper'>
				<div class='table-title'>
					<div class='row'>
						<div class='col-sm-6'>
							<h2>Portabilidade <b>Cadastro Alterado</b></h2>
						</div>
					</div>
				</div>
				<table class='table table-hover'>
                    <tr>
                        <th>Situação inicial:</th>
                        <td>$situacao</td>
					</tr>
                    <tr>
                        <th>Contrato:</th>
                        <td>$contrato</td>
					</tr>
					<tr>
                        <th>Cliente:</th>
                        <td>$cliente</td>
					</tr>
                    <tr>
                        <th>CPF/CNPJ:</th>
                        <td>$cpf</td>
					</tr>					
					<tr>
                        <th>NÚMERO:</th>
                        <td>$numero</td>
					</tr>	
					<tr>
                        <th>Operadora:</th>
                        <td>$operadora</td>
					</tr>
					<tr>
                        <th>Solicitante:</th>
                        <td>$solicitante</td>
					</tr>
					<th>Data da Solicitação:</th>
					<td>$dt_sol</td>
				</tr>
				<tr>
					<th>Via: </th>
					<td><a href='http://portabilidade.tvn-slz.com.br' style='color: green'>Portabilidades</a></td> 
				</tr>
			</table>
		</div>
	</body>
</html>

I would like the size delimited by the red line:

    
asked by anonymous 16.08.2018 / 16:51

1 answer

1

One possibility is to change the margins in the .table-wrapper class and correct the margins of the .table-title class according to the padding

.table-wrapper {
  margin: 30px 15%;
  padding: 20px 25px;
}
.table-title {
    margin: -20px -25px 0px;
}

<!DOCTYPE html>
<html lang='pt-br'>
	<head>
		<meta charset='utf-8'>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta name='viewport' content='width=device-width, initial-scale=1'>
		<title>Bootstrap CRUD Data Table for Database with Modal Form</title>
		<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto|Varela+Round'>
		<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
		<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
		<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
		<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
		<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
    <style type='text/css'>
    body {
			color: #566787;
			background: #70879a;
			font-family: 'Varela Round', sans-serif;
			font-size: 13px;
			}
			
			.table-wrapper {
			background: #fff;
			padding: 20px 25px;
			margin: 30px 15%;
			border-radius: 3px;
			box-shadow: 0 1px 1px rgba(0,0,0,.05);
			}
			
			.table-title {
			padding-bottom: 15px;
			background: #435d7d;
			color: #fff;
			padding: 16px 30px;
			margin: -20px -25px 0px;
			border-radius: 3px 3px 0 0;
			}
			.table-title h2 {
			margin: 5px 0 0;
			font-size: 24px;
			}
			.table-title .btn-group {
			float: right;
			}
			.table-title .btn {
			color: #fff;
			float: right;
			font-size: 13px;
			border: none;
			min-width: 50px;
			border-radius: 2px;
			border: none;
			outline: none !important;
			margin-left: 10px;
			}
			.table-title .btn i {
			float: left;
			font-size: 21px;
			margin-right: 5px;
			}
			.table-title .btn span {
			float: left;
			margin-top: 2px;
			}
			table.table tr th, table.table tr td {
			border-color: #e9e9e9;
			padding: 12px 15px;
			vertical-align: middle;
			}
			table.table tr th:first-child {
			width: 60px;
			}
			table.table tr th:last-child {
			width: 100px;
			}
			
			{
			background-color:transparent !important;
			}
			
			table.table-striped.table-hover tbody tr:hover {
			background: #f5f5f5;
			}
			table.table th i {
			font-size: 13px;
			margin: 0 5px;
			cursor: pointer;
			}	
			table.table td:last-child i {
			opacity: 0.9;
			font-size: 22px;
			margin: 0 5px;
			}
			table.table td a {
			font-weight: bold;
			color: #566787;
			display: inline-block;
			text-decoration: none;
			outline: none !important;
			}
			table.table td a:hover {
			color: #2196F3;
			}
			table.table td a.edit {
			color: #FFC107;
			}
			table.table td a.delete {
			color: #F44336;
			}
			table.table td i {
			font-size: 19px;
			}
			table.table .avatar {
			border-radius: 50%;
			vertical-align: middle;
			margin-right: 10px;
			}
			.pagination {
			float: right;
			margin: 0 0 5px;
			}
			.pagination li a {
			border: none;
			font-size: 13px;
			min-width: 30px;
			min-height: 30px;
			color: #999;
			margin: 0 2px;
			line-height: 30px;
			border-radius: 2px !important;
			text-align: center;
			padding: 0 6px;
			}
			.pagination li a:hover {
			color: #666;
			}	
			.pagination li.active a, .pagination li.active a.page-link {
			background: #03A9F4;
			}
			.pagination li.active a:hover {        
			background: #0397d6;
			}
			.pagination li.disabled i {
			color: #ccc;
			}
			.pagination li i {
			font-size: 16px;
			padding-top: 6px
			}
			.hint-text {
			float: left;
			margin-top: 10px;
			font-size: 13px;
			}    
			/* Custom checkbox */
			.custom-checkbox {
			position: relative;
			}
			.custom-checkbox input[type='checkbox'] {    
			opacity: 0;
			position: absolute;
			margin: 5px 0 0 3px;
			z-index: 9;
			}
			.custom-checkbox label:before{
			width: 18px;
			height: 18px;
			}
			.custom-checkbox label:before {
			content: '';
			margin-right: 10px;
			display: inline-block;
			vertical-align: text-top;
			background: white;
			border: 1px solid #bbb;
			border-radius: 2px;
			box-sizing: border-box;
			z-index: 2;
			}
			.custom-checkbox input[type='checkbox']:checked + label:after {
			content: '';
			position: absolute;
			left: 6px;
			top: 3px;
			width: 6px;
			height: 11px;
			border: solid #000;
			border-width: 0 3px 3px 0;
			transform: inherit;
			z-index: 3;
			transform: rotateZ(45deg);
			}
			.custom-checkbox input[type='checkbox']:checked + label:before {
			border-color: #03A9F4;
			background: #03A9F4;
			}
			.custom-checkbox input[type='checkbox']:checked + label:after {
			border-color: #fff;
			}
			.custom-checkbox input[type='checkbox']:disabled + label:before {
			color: #b8b8b8;
			cursor: auto;
			box-shadow: none;
			background: #ddd;
			}
			/* Modal styles */
			.modal .modal-dialog {
			max-width: 400px;
			}
			.modal .modal-header, .modal .modal-body, .modal .modal-footer {
			padding: 20px 30px;
			}
			.modal .modal-content {
			border-radius: 3px;
			}
			.modal .modal-footer {
			background: #ecf0f1;
			border-radius: 0 0 3px 3px;
			}
			.modal .modal-title {
			display: inline-block;
			}
			.modal .form-control {
			border-radius: 2px;
			box-shadow: none;
			border-color: #dddddd;
			}
			.modal textarea.form-control {
			resize: vertical;
			}
			.modal .btn {
			border-radius: 2px;
			min-width: 100px;
			}	
			.modal form label {
			font-weight: normal;
			}	
			
			.container-non-responsive {
			/* Margin/padding copied from Bootstrap */
			margin-left: auto;
			margin-right: auto;
			padding-left: 15px;
			padding-right: 15px;
			align: center;
			
			/* Set width to your desired site width */
			width: 1170px;
			}
		</style>
	</head>
	<body>
		<div class='container-non-responsive'>
			<div class='table-wrapper'>
				<div class='table-title'>
					<div class='row'>
						<div class='col-sm-6'>
							<h2>Portabilidade <b>Cadastro Alterado</b></h2>
						</div>
					</div>
				</div>
				<table class='table table-hover'>
                    <tr>
                        <th>Situação inicial:</th>
                        <td>$situacao</td>
					</tr>
                    <tr>
                        <th>Contrato:</th>
                        <td>$contrato</td>
					</tr>
					<tr>
                        <th>Cliente:</th>
                        <td>$cliente</td>
					</tr>
                    <tr>
                        <th>CPF/CNPJ:</th>
                        <td>$cpf</td>
					</tr>					
					<tr>
                        <th>NÚMERO:</th>
                        <td>$numero</td>
					</tr>	
					<tr>
                        <th>Operadora:</th>
                        <td>$operadora</td>
					</tr>
					<tr>
                        <th>Solicitante:</th>
                        <td>$solicitante</td>
					</tr>
					<th>Data da Solicitação:</th>
					<td>$dt_sol</td>
				</tr>
				<tr>
					<th>Via: </th>
					<td><a href='http://portabilidade.tvn-slz.com.br' style='color: green'>Portabilidades</a></td> 
				</tr>
			</table>
		</div>
	</body>
</html>

UPDATE

There is also a width control in the .container-non-responsive In case you can modify here tbm:

.container-non-responsive{
    width: 1170px;
}
    
16.08.2018 / 17:09