使用scrollY. 我不確定它為什么這樣做。
這是一個最小的作業示例。
var dataSet = [
{
"id" : "001",
"name" : "first last",
"age" : "123"
},
];
function doIt()
{
// just to create some dummy rows
for(var i = 0; i < 10; i)
{
dataSet = dataSet.concat(dataSet);
}
tbl = $('#userStories').DataTable({
data: dataSet,
columns: [
{
title: "ID",
data: "id"
},
{
title: "Name",
data: "name"
},
{
title: "Age",
data: "age"
}
],
scrollY: "300px",
scrollCollapse: true,
paging: false,
info: true,
});
}
$(document).ready(doIt);/* can't change these - start */
body>div {
margin: 5px;
padding: 5px 0;
border-bottom: 1px solid black;
}
table {
width: 100%;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th th th {
width: 100%
}
textarea {
width: 95%;
height: 100px;
background-color: #ffdddd;
}
input[type='button'],
input[type='submit'] {
background-color: #ddddff;
}
/* can't change these - end*/<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj 3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div>select:<br><br><br>
<div id="userStoriesWrapper">
<table id="userStories" class="display" style="width:100%">
</div>
</div>
</body>
</html>uj5u.com熱心網友回復：
.dataTables_scrollHeadInner {
padding-left: 0px!important;
}
這可能是https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js 中的一個錯誤
顯然，該元素以某種方式結束：
padding-left: 17px;
這可能與滾動條有關。
uj5u.com熱心網友回復：
該body>div樣式干擾了 DataTable 的<div>元素，它創建并使用這些元素來包裝其表頭。
您可以通過暫時注釋掉body>div您的樣式部分來自己查看。您還將看到 DataTables 正在添加一個17px填充來調整標題以允許表格主體滾動條的寬度。
在問題中，它提到can't change these- 在這種情況下，您可以通過添加以下 CSS 來覆寫有問題的樣式來強制解決問題：
div.dataTables_scrollHeadInner {
padding-left: 0 !important;
}
使用!important是最后的手段 - 它可能會在其他地方引起問題（盡管我理解在您的場景中是否可以接受）。
理想的情況下，這將是最好的類名稱添加到那些<div>你的元素做的，而不是用毯子需要調整，body > div選擇，然后相應地改變樣式表（一不能改變:-)。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/364141.html
標籤：javascript html 查询 数据表