我在页面上使用的表格有一些问题。
我为<th>
定义的样式在第一个表中可用,但是在第二个表中不起作用。
表<th style="width:10px">Number</th>
的employee_grid1
具有width:10px
。<th>
中相同的employee_grid2
更大。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">1</a>
</li>
<li role="presentation" class=""><a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">2</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
<table id="employee_grid1" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th style="width:10px">Number</th>
<th style="width:50px">Name</th>
<th>Date</th>
<th style="width:100px"></th>
</tr>
</thead>
</table>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
<table id="employee_grid2" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th style="width:10px">Number</th>
<th style="width:50px">Name</th>
<th>Date</th>
<th style="width:100px"></th>
</tr>
</thead>
</table>
</div>
</div>
</div>
也许是解决方案所必需的。表格中包含以下javascript:
<script type="text/javascript">
$( document ).ready(function() {
$('#employee_grid1').DataTable({
"bprocessing": true,
"serverSide": true,
"ajax": {
"url": "response1.php",
"type": "POST",
"error": function(){
$("#employee_grid_processing").css("display","none");
}
},
"columnDefs": [
{ "targets": 3, "render": function ( data, type, full, meta ) { return '<p>'+data+'</p>'; } }
]
});
});
</script>
<script type="text/javascript">
$( document ).ready(function() {
$('#employee_grid2').DataTable({
"bprocessing": true,
"serverSide": true,
"ajax": {
"url": "response2.php",
"type": "POST",
"error": function(){
$("#employee_grid_processing").css("display","none");
}
},
"columnDefs": [
{ "targets": 3, "render": function ( data, type, full, meta ) { return '<p>'+data+'</p>'; } }
]
});
});
</script>
最佳答案
在您的代码中表的宽度为100%,因此最好在表单元格上使用%。例:
<table width="100%" cellspacing="0">
<thead>
<tr>
<th width="10%">Number</th>
<th width="30%">Name</th>
<th>Date</th>
<th width="60%"></th>
</tr>
</thead>
</table>
或者,如果您希望表格宽度为100%并且单元格应为固定宽度,则对表格使用'table-layout:fixed'和'width:100%'样式。
<table class="tableClass" cellspacing="0">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Date</th>
<th>Test</th>
</tr>
</thead>
</table>
并添加以下样式
tableClass {
table-layout: fixed;
width:100% !important;
}
th:nth-child(1){
width:100px !important;
}
th:nth-child(2){
width:150px !important;
}
th:nth-child(3){
width:200px !important;
}
th:nth-child(4){
width:100px !important;
}
关于javascript - 样式在第二张表中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44692536/