javascript - 样式在第二张表中不起作用

Question

我在页面上使用的表格有点问题。

我为 <th> 定义的样式在我的第一个表中工作，但在第二个表中它不工作。

<th style="width:10px">Number</th>对于 table 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>

Answer 1

在您的代码中，表格宽度为 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;
}