Question

是否可以通过DataTables设置或通过CSS控制tr的行高？我尝试过各种各样的事情，但似乎没有任何改变line-height。

表CSS

.table tbody tr:hover td, .table tbody tr:hover th {
    background: rgba(36, 198, 213, 0.3);
    opacity: 0.5;
    color: #000;
}

.table tbody {
  font-size: 15px;
}

.dataTable tbody tr {
    line-height: 20px !important;
    height: 40px;
}

.dataTables_paginate a {
    background: #ff0000;
}

.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1;
    /* Feeling sorry for IE */
}

.dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    height: 30px;
    margin-left: -125px;
    margin-top: -15px;
    padding: 14px 0 2px 0;
    border: 1px solid #ddd;
    text-align: center;
    color: #999;
    font-size: 14px;
    background-color: white;
}

.dataTables_length {
    width: 40%;
    float: left;
}

.dataTables_filter {
    width: 50%;
    float: right;
    text-align: right;
}

.dataTables_info {
    width: 60%;
    float: left;
}

.dataTables_paginate {
    float: right;
    text-align: right;
}

＆＃13;

$(document).ready(function(){
  $("#ignored_device_table").DataTable( {
    order: [[ 0, "asc"]],
    dom: 'Bfrtip',
    buttons: ['copy','excel', 'pdf','csv','print']
  });
});

＆＃13;

<!-- page content -->
<div class="right_col" role="main">
  <div class="">
    <!-- host data table -->
    <div class="row">

      <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
          <div class="x_title">
            <h2>Ignored Devices
              <small>By Date</small>
            </h2>
            <ul class="nav navbar-right panel_toolbox">
              <li>
                <a class="collapse-link">
                  <i class="fa fa-chevron-up"></i>
                </a>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                  <i class="fa fa-wrench" role="menu"></i>
                </a>
              </li>
              <li>
                <a class="close-link">
                  <i class="fa fa-close"></i>
                </a>
              </li>
            </ul>
            <div class="clearfix"></div>
          </div>

          <div class="x_content">
            <div class="table-responsive">
              <table id="ignored_device_table" class="table table-striped">
                <thead>
                  <tr>
                    <th>Date </th>
                    <th>Hostname </th>
                    <th>IP Address </th>
                    <th>Name </th>
                    <th>Reason </th>
                    <th>Expiration </th>
                    <th><span class="nobr">Action</span></th>
                  </tr>
                </thead>

                <tbody>
                  <tr>
                    <td>05/06/16</td>
                    <td>DB-01</td>
                    <td>192.168.1.100</td>
                    <td>Jimmy Smith</td>
                    <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id iaculis massa. Mauris libero augue, bibendum ut efficitur a, imperdiet vel nisl. Curabitur ut blandit velit. Nulla tincidunt leo convallis risus bibendum, pulvinar bibendum lectus maximus. Vivamus convallis mi vel mollis sollicitudin. </td>
                    <td>06/06/16</td>
                    <td><a href="#">Restore</a>
                    </td>
                  </tr>
                  <tr>
                    <td>05/02/16</td>
                    <td>DB-02</td>
                    <td>192.168.1.101</td>
                    <td>Jimmy Smith</td>
                    <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td>
                    <td>06/02/16</td>
                    <td><a href="#">Restore</a>
                    </td>
                  </tr>
                  <tr>
                    <td>04/06/16</td>
                    <td>WEB-01</td>
                    <td>192.168.1.102</td>
                    <td>Jimmy Smith</td>
                    <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td>
                    <td>05/06/16</td>
                    <td><a href="#">Restore</a>
                    </td>
                  </tr>
                  <tr>
                    <td>03/06/16</td>
                    <td>WEB-02</td>
                    <td>192.168.1.103</td>
                    <td>Jimmy Smith</td>
                    <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td>
                    <td>04/06/16</td>
                    <td><a href="#">Restore</a>
                    </td>
                  </tr>
                  <tr>
                    <td>02/22/16</td>
                    <td>Firewall</td>
                    <td>192.168.1.104</td>
                    <td>Jimmy Smith</td>
                    <td>This host is under version control through the IS department and is scheduled to be updated next quarter.</td>
                    <td>03/22/16</td>
                    <td><a href="#">Restore</a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

<强> EDITED
-------

在控制台中查找你给桌子的id 你会在近处的后代找到tr。

脚本喜欢这样：

$("#ignored_device_table").find("tr").css({"height":"20px"});

在你的CSS文件中，你可以尝试（我从未这样做过，不能把我的手放在火中）：

#ignored_device_table tbody tr{
    height:20px !important;
}

要使用表格的整个框架尺寸，您必须处理wrapper。这就是我第一次快速回答的原因。

---------------
第一个答案 查找DataTable生成的id来包装表。

IS 是根据您在HTML中提供的id作为表格ID生成的。
就像你的表是用这个id cert命名的那样：

生成的包装器为：cert_wrapper。您可以通过在控制台中检查来找到它。

然后你可以根据这个来编写脚本......像：

$("#cert_wrapper tr").css({"height":"20px"});

您将能够捕捉到一般tr，td等。但不是特定的，因为Datable不会生成像rowID或cellID这样的东西。

请确保将这些未来脚本包含在$(document).ready(function(){});中，因为该表是在客户端生成的。

）

Answer 2

嗯，经过一些修修补补后，我不得不重写引导样式：

.table.dataTable > tbody > tr > td {
  line-height: 2rem !important;
}

DataTables行高控制

2 个答案: