Table Width Wider than Container
Table Width Wider than Container
ericcota
Posts: 7Questions: 1Answers: 0
How do I get the data table to stay within the container?
Using the code below the table is outside the container (note the colors of the page are for illustrative purposes), I want the data table to stay within the red box.
<!DOCTYPE html>
<html>
<head>
<!-- CSS FILES -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/fh-3.1.4/datatables.min.css" />
<style>
body{
background-color: darkseagreen;
}
.container {
background-color: #f5f8fa;
border: 1px solid red;
}
</style>
</head>
<body>
<!-- MAIN CONTAINER -->
<div id="divContainer" class="container ">
<div class="row">
<div class="col-12">
<table id="tblDataTable" class="table table-striped table-hover table-bordered attendee-list" cellpadding="0" border="0">
<thead>
<tr role="row">
<th>Person Name</th>
<th>Rank</th>
<th>Status</th>
<th>10/09/2018</th>
<th>10/11/2018</th>
<th>10/16/2018</th>
<th>10/18/2018</th>
<th>10/23/2018</th>
<th>10/25/2018</th>
<th>10/30/2018</th>
<th>11/01/2018</th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd"> <td class="sorting_1">Doe, John</td> <td>Provisional</td> <td>Active</td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr>
<tr role="row" class="odd"> <td class="sorting_1">Smith, James</td> <td>Candidate</td> <td>Active</td> <td>Present </td> <td> </td> <td>Present </td> <td>Present </td> <td>Present </td> <td>Present </td> <td>Present </td> <td> </td> </tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- JS FILES -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-html5-1.5.4/b-print-1.5.4/fh-3.1.4/datatables.min.js"></script>
<script type="text/javascript">
$(function () {
$('#tblDataTable').DataTable({
"fixedHeader": true,
"responsive": true,
"searching": false,
"paginate": false,
"info": false,
"ordering": true
});
});
</script>
</body>
</html>
This discussion has been closed.
Answers
Hi @ericcota ,
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Thanks for the response...
Hope this works, here is a test case I just created using the same code as above:
live.datatables.net/zufukawo/1/edit
The problem looks to be the amount of text you have in the columns and header. The table is not breaking in the middle of words so that is as small as it can get.
A couple of options may be to use the Responsive Extension.
Or, you could try some css settings, some that come to mind are:
Kevin
Shouldn't the table be able to stay within it's parent container?
In the example you posted it simply can't. The content of the table is forcing its width and without some additional CSS such as that which Kevin suggested, there is no way for the browser to wrap the text to let it fit in the container.
The other solution, as Kevin also suggested, is to use Responsive.
Allan