所有行的固定列行高度

Question

我使用了固定左列的数据表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>