时间戳

首页 > 解决方案 > 所有行的固定列行高

javascript - 所有行的固定列行高

问题描述

我使用了带有固定左列的数据表 js。我无法降低行高。如何减少或设置行高？我检查了此链接和其他 Stack Overflow 答案。 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 对象做到这一点，那就太好了。

标签： javascriptjquerydatatables

解决方案

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

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

推荐阅读