Блог

Главная - Вопросы по программированию - Как я могу заставить таблицу, созданную с использованием CSS display: table, соответствовать минимальной высоте?

Как я могу заставить таблицу, созданную с использованием CSS display: table, соответствовать минимальной высоте?

#html #angularjs #css

#HTML #angularjs #css

Вопрос:

Я использую display: table, display: table-row и display: table-cell. У меня большое количество строк в таблице, и я использую AngularJS ng-repeat для их заполнения. Вот пример всего с двумя строками, но на практике у меня может быть больше, и мне нужно, чтобы все они соответствовали высоте 10rem.

 <div style=height: 10rem>
 <div style="display: table">
  <div style="display: table-row">
      <div style="display: table-cell">
      xxx
      </div>
      <div style="display: table-cell">
      xxx
      </div>
  </div>
  <div style="display: table-row">
      <div style="display: table-cell">
      xxx
      </div>
      <div style="display: table-cell">
      xxx
      </div>
  </div>
 </div>
</div>

Я хотел бы ограничить высоту таблицы (сетки) и иметь полосу прокрутки справа. Однако, что бы я ни делал, это, похоже, не заставляет таблицу помещаться в пределах a <div> с определенной высотой.

Кто-нибудь может дать мне какие-либо советы о том, как я могу ограничить высоту таблицы и отобразить вертикальную и горизонтальную полосы прокрутки.

Комментарии:

1. Может быть, попробовать overflow: scroll; в css?

Ответ №1:

Добавить overflow-x: scroll (или auto ) в контейнер. (Тот, у которого высота 10rem.) И overflow-x: visible к самому элементу таблицы.

Дополнение: вы забыли кавычки в первой строке:

 <div style="height: 10rem">