所有行的固定列行高度

Question

我使用了固定左列的datatable js。我无法降低排的高度。如何减少或设置行高？我检查了这个链接和其他堆栈溢出答案。http://datatables.net/forums/discussion/11828/how-do-i-set-the-row-height-in-datatables

对于第一页，它们都显示在正确的高度，但当我到达页面的末尾，最后一项涵盖了所有可用的空间。

​

这就是我要得到的。

请在这方面协助我。

我用这个来修复它，

.dataTable {
    display:block;
}
.dataTable tr td {
    min-width: 150px;
    height:20px;
}

如果我能用Datatable对象来完成它，那就太棒了。

Answer 1

您确实将表的内联样式设置为固定高度。

<table id="a" style="height:400px;">

这不是数据存储的问题，这是html中表的正常行为。如果为表元素设置固定高度，表将拉伸所有呈现的行和单元格，以填充该表元素。

您可以删除内联样式，并在css中设置行高：

​

$(function(){$('#a').dataTable();});

.dataTable th,
.dataTable tr {
  height: 2em;
}

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
          
<table id="a">
  <thead>
    <tr><th>Id</th><th>Title</th></tr>
  </thead>
  <tbody>
    <tr><td>1</td><td>abcdef</td></tr>
    <tr><td>2</td><td>abcdef</td></tr>
    <tr><td>3</td><td>abcdef</td></tr>
    <tr><td>4</td><td>abcdef</td></tr>
    <tr><td>5</td><td>abcdef</td></tr>
    <tr><td>6</td><td>abcdef</td></tr>
    <tr><td>7</td><td>abcdef</td></tr>
    <tr><td>8</td><td>abcdef</td></tr>
    <tr><td>9</td><td>abcdef</td></tr>
    <tr><td>10</td><td>abcdef</td></tr>
    <tr><td>11</td><td>abcdef</td></tr>
    <tr><td>12</td><td>abcdef</td></tr>
    <tr><td>13</td><td>abcdef</td></tr>
    </tbody>
</table>

​