Question

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

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

表<th style="width:10px">Number</th>的

employee_grid1有一个width:10px。 <th>中employee_grid2的{{1}}相同。

<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;
}

Answer 2

table cell始终根据内容采用宽度，而不是width您可以使用max-width。它会工作。查看下面的更新代码段...

或者您可以查看更新的fiddle

<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="max-width:10px">Number</th>
        <th style="max-width:50px">Name</th>
        <th>Date</th>
        <th style="max-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="max-width:10px">Number</th>
        <th style="max-width:50px">Name</th>
        <th>Date</th>
        <th style="max-width:100px"></th>
      </tr>
    </thead>
  </table>
</div>

Answer 3

如果单词之间没有空格，则表格的单元格的宽度不能小于其内容。所以，您可以使用word-break: break-word;强制换行（但不建议这样做）。理想情况是选择与您的内容匹配的最小宽度。

样式在第二个表中不起作用

3 个答案: