I am trying to create a table that:
- Has 100% width
- Is limited to 500px in height
- Has a sticky thead
I appear to be in a loop with display: table vs display: block (and their inline- counterparts) both seem to make the opposite things work and break. display: block achieves the sticky header and fixed height, but it ignores the 100% width (for the tbody only in most cases) so I'll have a sticky 100% width thead, but a tbody that seems to fit itself into the bloated width of the first child of the thead. Applying display: table makes everything in the table 100% width, but, ignores the sticky thead and the maximum 500px height. I have tried putting it into an additional table-container applying the fixed height, this works to an extent, but ignores the sticky thead element and seems to make the tbody and thead columns different sizes, meaning they don't line up and appear under their respective thead.
display: table applied, 100% width, no fixed height or sticky header
display: block applied, fixed height and sticky header, no 100% width
Code:
table {
overflow: auto;
border-left: 1px solid #b4b4b4;
border-right: 1px solid #b4b4b4;
height: auto;
width: auto;
max-height: 500px;
max-width: 100%;
display: inline-block;
z-index: 10000;
margin: 0 auto;
background-color: white;
border-radius: 5px 5px 0 0;
}
table thead {
position: sticky;
top: 0;
width: 100%;
background-color: #f21c0a;
color: #fff;
z-index: 11;
}
table tr {
background-color: white;
}
table tr:nth-child(odd):hover, table tr:nth-child(even):hover {
background: #F8FFF5;
}
table tr:nth-child(odd) {
background: #f21c0a10 !important;
}
table tr:nth-child(even) {
background: #fff;
}
table td:first-child {
position: sticky;
left: 0;
/* box-shadow: -4px 14px 16px #3e3e3e50; */
border-right: 1px solid #b4b4b4;
border-left: 0;
background: inherit;
}
table th:first-child {
position: sticky;
left: 0;
box-shadow: -4px 3px 16px #3e3e3e50;
}
table tbody {
width: 100%;
background-color: inherit;
}
table td {
border-right: 1px solid #b4b4b4;
border-bottom: 1px solid #b4b4b4;
}
table td, table th {
/* padding: 10px; */
width: 1px;
max-width: 1000px;
text-align: left;
}
table td:first-child, table th:first-child {
padding: 10px;
width: 1px;
max-width: 1000px;
text-align: left;
border-right: 1px solid #b4b4b4;
z-index: 10;
'}
table th:first-child {
z-index: 11;
}
This is how datatables renders itself (I don't know where the inline 100% width comes from):
<table id="tblFileTypes" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>
ID
</th>
<th>
type description
</th>
<th>
filename contains
</th>
<th>
production type
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="/Admin/FileType/Edit/1">1</a>
</td>
<td>
Bill
</td>
<td>
Bill%
</td>
<td>
Letter Upto 20pp
</td>
</tr>
<tr>
<td>
<a href="/Admin/FileType/Edit/2">2</a>
</td>
<td>
Welcome Pack
</td>
<td>
WelcomePack%
</td>
<td>
Welcome Pack
</td>
</tr>
<tr>
<td>
<a href="/Admin/FileType/Edit/3">3</a>
</td>
<td>
Tariff Change
</td>
<td>
TariffChangeConfirmationLetter%
</td>
<td>
Letter Upto 20pp
</td>
</tr>
<tr>
<td>
<a href="/Admin/FileType/Edit/4">4</a>
</td>
<td>
F001 : Bill Reminder
</td>
<td>
%F001%
</td>
<td>
Letter Upto 20pp
</td>
</tr>
</tbody>
</table>
Code rendering the table:
function bindDatatable() {
datatable = $('#tblFiles')
.DataTable({
"sAjaxSource": "@Url.Action("GetTableData","Faults")",
"bServerSide": true,
"bProcessing": true,
"bSearchable": false,
"searching": false,
"autowidth": false,
"bAutowidth": false,
"ordering": true,
"order": [[1, 'asc']],
"pageLength": 100,
"lengthMenu": [[10, 25, 50, 100, 999999], [10, 25, 50, 100, "All"]],
"language": {
"emptyTable": "No Files found",
"processing":
'<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="color:#2a2b2b;"></i><span class="sr-only">Loading...</span> '
},
"columns": [
{
"data": "id",
"searchable": true
},
{
"data": "eon_file_name",
"searchable": true
},
{
"data": "type_description",
"searchable": true
},
{
"data": "datetime_added",
"searchable": true
},
{
"data": "faults",
"searchable": true
},
{
"data": null,
"targets": -1,
"defaultContent": "<button id='btnPDf' class='btn btn-primary'>View PDF</button>"
},
],
createdRow: function (row, data, dataIndex) {
var $btn = $(row).find('#btnPDf');
var $td = $(row).find("td:eq(0)");
var id = $td.html();
$btn.click(function () {
ViewPdf(id);
});
}
});
}
