Can anyone help with the following problem? I’m trying to create a Datatable with fixed width columns.
1. If I specify 10px for the column width, Datatables resizes the columns to occupy the full page width.
2. If I specify an outer container. Datatables seems to set the column width close to the desired width.
Is there any way of forcing Datatables to set the correct width without the need for an outer container?
Thanks,
Sarb
<html>
<head>
<link href="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.my-table').dataTable({
bAutoWidth: false,
aoColumnDefs: [
{
"aTargets": [0],
sWidth: '10px'
},
{
"aTargets": [1],
sWidth: '10px'
}
]
});
});
</script>
</head>
<body>
<!-- example 1 -->
<table class="my-table display">
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
<!-- example 2 -->
<div style="width: 50px">
<table class="my-table display">
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
1. If I specify 10px for the column width, Datatables resizes the columns to occupy the full page width.
2. If I specify an outer container. Datatables seems to set the column width close to the desired width.
Is there any way of forcing Datatables to set the correct width without the need for an outer container?
Thanks,
Sarb
<html>
<head>
<link href="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.my-table').dataTable({
bAutoWidth: false,
aoColumnDefs: [
{
"aTargets": [0],
sWidth: '10px'
},
{
"aTargets": [1],
sWidth: '10px'
}
]
});
});
</script>
</head>
<body>
<!-- example 1 -->
<table class="my-table display">
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
<!-- example 2 -->
<div style="width: 50px">
<table class="my-table display">
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>