javascript 使用 Google Chrome 启用 scrollX 或 scrollY 时，数据表中出现重复的空标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29226283/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Duplicate empty header occur in datatable when enabling scrollX or scrollY when using Google Chrome
提问by d_unknown
I have a datatable in my program. And I want it to be scrollable horizontally so what I did was like this:
我的程序中有一个数据表。我希望它可以水平滚动，所以我做的是这样的：
var tableI = $('#table_data').DataTable({
"bLengthChange": false,
"scrollX": true,
"dom": 'frtp'
});
It came out like this(as sample output):
结果是这样的（作为示例输出）：
It doubled the header. How am I going to fix this?
它使标题翻了一番。我将如何解决这个问题？
EDIT:
Here's another sample:
编辑：这是另一个示例：
here's my HTML code:
这是我的 HTML 代码：
<table class="table table-striped" id="act_data" width="100%"> <div style="float:left;width:385px" >
<button type="button" id="edit_acc" class="btn btn-primary" data-toggle="modal" data-target="#editAcc"><span class=" fa fa-edit "> Edit Account</span></button>
<button type="button" id="de_act" class="btn btn-primary" data-toggle="modal" data-target="#DeAcc"><span class=" fa fa-edit "> Activate/Deactivate</span></button>
<!-- <button type="button" id="refresh" class="btn btn-link" data-target="#DeAcc"><span class="fa fa-refresh"></span></button>-->
<a href="<?php echo site_url('admin/homeAdmin/homepage')?>?id=6" class="btn btn-link"><span class="fa fa-refresh"></a>
</div><thead class="header">
<tr class="well">
<th style="font-size: 14px;">Employee ID#</th>
<th style="font-size: 14px;">Username</th>
<th style="font-size: 14px;">Account Type</th>
<th style="font-size: 14px;">Status</th>
</tr>
</thead>
<tbody>
<?php if($result != NULL){?>
<?php foreach($result as $row){ ?>
<tr>
<td style="font-size: 15px;padding-left: 20px;">
<?php echo $row->employeeID;?>
<input type="hidden" name="userID" id="userID" value="<?php echo $row->userID;?>" />
<input type="hidden" name="pass" id="pass" value="<?php echo $row->password;?>" />
</td>
<td style="font-size: 15px;padding-left: 20px;">
<?php echo $row->username;?>
</td>
<td style="font-size: 15px;padding-left: 20px;">
<?php echo $row->usertype;?>
</td>
<td style="font-size: 15px;padding-left: 20px;">
<?php echo $row->status; ?>
</td>
</tr>
<?php }?>
<?php }?>
</tbody>
</table>
回答by Sairam Krish
I had the same issue with firefox & firefox developer edition. The root cause is, when we set scrollX:true, datatable adds an additional div with a table and a header inside, apart from the table & header already constructed. This is to get the scrolling within table effect.
我在 firefox 和 firefox 开发人员版中遇到了同样的问题。根本原因是，当我们设置时scrollX:true，除了已经构造的表和表头之外，datatable 添加了一个额外的 div，里面有一个表和一个表头。这是为了获得表格内的滚动效果。
Datatable, tries to set the height to 0px, to hide it. Some browsers don't interpret this properly.
数据表，尝试将高度设置为 0px，以隐藏它。一些浏览器不能正确解释这一点。
<tr style="height: 0px;" role="row">
To hide it, changing the style to this row to 'hidden' will break the structure of the table. The working solution would be, to have visibility:'collapse'
要隐藏它，将此行的样式更改为“隐藏”将破坏表格的结构。工作的解决方案是，有visibility:'collapse'
Sample datatable configuration:
示例数据表配置：
tableElement.DataTable({
"scrollX": true,
"initComplete": function(settings, json) {
$('.dataTables_scrollBody thead tr').css({visibility:'collapse'});
}
//other datatable configurations...
});
since it's a table, we need to have visibility:'collapse'and not visibility:'hidden'- more info on visibility css property
因为它是一个表格，所以我们需要visibility:'collapse'而不是visibility:'hidden'- 有关可见性 css 属性的更多信息
回答by Urvashi Bhatt
Solution 1 :
解决方案1：
To Resolve This Please Use "scrollXInner": trueAvoid to Using "scrollX": true"
要解决此问题，请使用"scrollXInner": true避免使用"scrollX": true"
var tableI = $('#table_data').DataTable({
"bLengthChange": false,
"scrollX": true, //Do Not Use This (Remove This Line)
"scrollXInner": true //Use This (Add This Line)
"dom": 'frtp'
});
Solution 2 :
解决方案2：
OR You Can Add This CSS
或者你可以添加这个 CSS
.dataTables_scrollBody thead tr[role="row"]{
visibility: collapse !important;
}
回答by ángelBlanco
The solution was simple in my case. Just include this on your css:
就我而言，解决方案很简单。只需将其包含在您的 css 中：
/* Override sorting header --> DataTable Bug */
.dataTables_scrollBody > table > thead > tr {
visibility: collapse;
height: 0px !important;
}
回答by Justin Waite
I had the same issue on Google Chrome. This was the fix:
我在 Google Chrome 上遇到了同样的问题。这是修复：
.dataTable(
{
"processing": false,
"serverSide": false,
"autoWidth": true,
"columnDefs": [
{"orderable": false, "targets": [5, 6]}
],
"order": [1, 'asc'],
"dom": 'l<"toolbar">frtip',
drawCallback: function () { // this gets rid of duplicate headers
$('.dataTables_scrollBody thead tr').css({ display: 'none' });
},
scrollY: '65vh',
scrollCollapse: true,
paging: false
});
回答by Anshul Dahiya
Good explanation by Sairam. Better way would be to use just a CSS
赛拉姆很好的解释。更好的方法是只使用 CSS
div.dataTables_scrollBody thead {
display: none;
}
回答by harshvchawla
This worked for me:
这对我有用：
$('#DataTables_Table_0').on( 'draw.dt' function() {
$('.dataTables_scrollBody thead tr').addClass('hidden')
}
回答by The Guest
Try something like this:
尝试这样的事情：
"scrollX": '100%',
"scrollX": '100%',
"scrollXInner": '125%',
"scrollXInner": '125%',
回答by bany
The best way is to use
最好的方法是使用
dataTable.columns.adjust();
on init/draw callback
初始化/绘制回调
回答by Dan Leksell
This hides the second header and removes the white space between the header and body.
这将隐藏第二个标题并删除标题和正文之间的空白。
<style>
.dataTables_scrollBody thead tr {
visibility: collapse;
}
.dataTables_scrollBody {
margin-top: -10px;
}
</style>
回答by Swati
You can use Following code in your CSS:
您可以在 CSS 中使用以下代码：
div.dataTables_scrollHeadInner table { margin-bottom: 0px !important; }
