Question

我正在使用js DataTable，我正在尝试设置表格的默认高度和行的默认高度，实际上我做的是：

$(document).ready(function() {
    var table = $('#example').DataTable
    ({
        iDisplayLength: 15,
      "bLengthChange": false
    });
    $("#example").css("height", "650px");
    $("#example tbody tr").css("height", "75px !important");
} );

这是我的HTML：

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>

    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>

    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>

对于实例，我插入了JSFIDDLE here。

如何看到tr没有达到默认高度但是太大了，我该如何解决？

Answer 1

这是因为，您将桌子的高度设置为650像素，因此它会向下延伸到您的行，总计达到650像素（页眉和页脚都是20像素）＆amp; 305用于两个数据行）。由于表格的高度确定了优先级，因此行的高度会自动按表格设置。通过将数据行之间的高度相等，并将页眉和页脚的高度除以它的默认值。因此，如果您要设置桌面高度，行的高度将无法正常工作，因为您正在寻找它。最好为表格设置最大高度并设置行的高度

$("#example").css("max-height", "650px");
$("#example tbody tr").css("height", "75px");

无法设置表高度和tr

1 个答案: