Quando a página é diminuída o rodapé nem a barra do topo acompanha a largura da página, ficam cortados. No momento não precisa ser responsivo, apenas que acompanhe a largura da página quando diminuído.
<style type="text/css">
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0;
}
#tab1 td {
white-space: normal;
word-wrap: break-word;
}
table {
padding-left: 10;
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
}
thead {
font-weight: bold;
background-color: #247099;
text-align: center;
color: #fff;
}
.tb3 {
background: url('Sem-Título-1.jpg') no-repeat #3d6599;
background-position: left;
margin: auto;
width: 100%;
border-bottom: 5px solid;
border-color: #F5F5F5;
padding-top: 1em;
padding-bottom: 1em;
margin-bottom: 2em;
}
footer {
color: DarkSlateGray;
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
text-align: center;
position: absolute;
margin-top: 50;
bottom: 0;
width: 100%;
height: 30;
background-color: #F5F5F5;
}
.footerdiv {
min-height:100%;
position:relative;
padding-bottom:50;
}
</style>
<html !DOCTYPE>
<head>
<meta charset="utf-8">
<title>Exemplo</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet" />
<script>
$(document).ready( function () {
$('#tab1').DataTable();
} );
</script>
</head>
<body>
<div class="footerdiv">
<table class="tb3">
<tr>
<td></td>
</tr>
</table>
<table class="display nowrap" id="tab1" style="width:100%">
<thead>
<tr>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
<th>Lorem ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
</tr>
<tr>
<td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
</tr>
<tr>
<td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
</tr>
<tr>
<td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
</tr>
<tr>
<td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
</tr>
<tr>
<td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
</tr>
<tr>
<td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
<td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
</tr>
</tbody>
</table>
<footer>
<font>
Lorem ipsum dolor sit amet
</br>
Lorem ipsum dolor sit amet
</font>
</footer>
</div>
</body>
</html>
Show 10 entries Search ˾̅_̅_̅_̅_̅_̅_̅_̅_̅_̚
e a barra de baixo é a que está escritoShowing 1 to 7 of 7 entries