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

我为<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/

10-12 12:31
查看更多