фиксированная высота строки столбца для всех строк - PullRequest
0 голосов
/ 05 июня 2019

Я использовал datatable js с фиксированным левым столбцом.Я не смог уменьшить высоту ряда.Как я могу уменьшить или установить высоту строки?Я проверил эту ссылку и другие ответы переполнения стека.http://datatables.net/forums/discussion/11828/how-do-i-set-the-row-height-in-datatables

Для первых страниц все они отображаются на нужной высоте, но когда я добираюсь до конца страницы, последний элемент покрывает все доступное пространство.

the output of following the recommendations

Вот то, что я получаю.

Пожалуйста, помогите мне в этом.


Я использую это, чтобы исправить это,

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

Если я смогу сделать это с объектом Datatable, это будет здорово.

1 Ответ

0 голосов
/ 06 июня 2019

Вы установили встроенный стиль таблицы на фиксированную высоту.

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...