it-swarm.com.ru

CSS - фиксированная высота на tr и фиксированная высота на столе?

Мне нужно иметь таблицу, в которой есть строки с фиксированной высотой, а сама таблица должна иметь фиксированную высоту . Например, все строки будут иметь высоту 8px, а таблица будет иметь высоту 400px. Если строк будет меньше, чем общая высота таблицы, то оставшаяся часть таблицы должна быть похожа на пробел.

Но CSS автоматически перенастраивает высоту строки, если я установил фиксированную высоту на столе.

Мне нужна таблица, чтобы выглядеть так:

|row  |cont  |
|row  |cont  |
|row  |cont  |
|            |
|            |
|            |
|End of table|

Я попробовал это:

CSS:

.t-table {
  border: 1px solid black;
  height: 400px;
  border-collapse: collapse;
}
td {
  border: 1px solid black;
}

HTML:

<table class="t-table">
<tr style="line-height: 8px">
  <td>A</td>
  <td>B</td>
</tr>
<tr style="line-height: 8px">
  <td>1</td>
  <td>2</td>
</tr>
<tr>
  <td></td>
  <td></td>
</tr>
</table>

Или вы можете проверить это здесь: https://jsfiddle.net/utrwqfux/

P.S. Так что, если я наложу высоту на таблицу, она будет игнорировать высоту на строках. Последний tr был без высоты, поэтому идея состояла в том, чтобы изменить размер автоматически, заполняя пустой пробел.

5
Andrius

Вы можете установить height:8px на первый и второй tr. И удалите среднюю границу из пустых ячеек в последней переменной tr.

.t-table {
  border: 1px solid black;
  height: 400px;
  border-collapse: collapse;
}
.t-table td {
  border: 1px solid black;
}
.t-table td:empty {
  border-left: 0;
  border-right: 0;
}
<table class="t-table">
  <tr style="line-height: 8px; height: 8px;">
    <td>A</td>
    <td>B</td>
  </tr>
  <tr style="line-height: 8px; height: 8px;">
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

1
Stickers

По сути, я сделал это, создав таблицу в CSS, а не в HTML. Это дает немного больше контроля.

HTML:

<div class="table">
    <div class="tr">
        <div class="td">A</div>
        <div class="td">B</div>
    </div>
    <div class="tr">
        <div class="td">1</div>
        <div class="td">2</div>
    </div>
</div>

CSS:

.table {
    background: rebeccapurple;
    display: table;
    height: 400px;
    table-layout: fixed;
    width: 400px;
}

.td {
    background: hotpink;
    display: table-cell;
    height: 8px;
    width: 200px;
}

Пример из жизни: http://codepen.io/WartClaes/pen/mVxdQg?editors=1100

Единственная проблема здесь в том, что td будет выше, чем 8px, так как их содержание больше, чем это. Является ли 8px фактической высотой?

1
Wart Claes

Я согласен с Wart Claes в отношении отображения элементов div в качестве элементов таблицы по сравнению со старой таблицей. Но проблема, с которой вы сталкиваетесь, заключается в том, что браузер добавляет элемент tbody в вашу таблицу. Этот элемент форсирует высоту строки. Чтобы это исправить, есть два способа. 

1) Настройте tbody для отображения в виде блока, это заставит браузер игнорировать его свойства отображения и будет работать именно так, как вы хотите.

https://jsfiddle.net/benneb10/utrwqfux/1/

tbody{
  display:block;
}

2) Установите высоту стола с помощью тела:

tbody{
  height:400px;
  overflow:auto;
  overflow-x:hidden;
  border: 1px solid black;
}

Тем не менее, выполнение этого не сделает ваш стол 400px, как вы хотите. Это заставит tr быть ровно 8px.

https://jsfiddle.net/benneb10/utrwqfux/2/

0
Benneb10