【发布时间】：2021-01-20 04:03:46
【问题描述】：
我正在尝试创建一个表：
- 有 100% 的宽度
- 高度限制为 500 像素
- 头上有粘性
我似乎处于一个循环中，显示：表与显示：块（以及它们的内联对应物）似乎都使相反的事情工作和中断。 display: block 实现了粘性标题和固定高度，但它忽略了 100% 宽度（在大多数情况下仅适用于 tbody）所以我将有一个粘性 100% 宽度的标题，但是一个似乎适合自己的 tbody 臃肿头的第一个孩子的宽度。应用 display: table 使表格中的所有内容都为 100% 宽度，但忽略了粘性标题和最大 500px 高度。我已经尝试将它放入一个应用固定高度的附加表格容器中，这在一定程度上有效，但忽略了粘性 thead 元素并且似乎使 tbody 和 thead 列的大小不同，这意味着它们不会排列并出现在下面他们各自的主题。
显示：表格已应用，100% 宽度，没有固定高度或粘性标题
显示：应用块，固定高度和粘性标题，没有 100% 宽度
代码：
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;
}
datatables 是这样呈现自己的（我不知道内联 100% 宽度从何而来）：
<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>
渲染表格的代码：
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);
});
}
});
}
【问题讨论】：
-
欢迎堆栈溢出，请Share your code
-
不应该这样做，但jsfiddle.net/sx1d4vue
-
@GonzaloFaus 成功了，但是 theads 大于 tbody 的问题仍然存在； ibb.co/68kTqbQ
-
@MaxiGui 我已经用表格 CSS 代码更新了我的帖子。
-
请同时提供 html 和 Gonzalo 发送的示例。我建议您将 tbody 设置为 block 并将 tr 设置为 table。
标签： html css datatables