Не изменять высоту строки таблицы при увеличении всей высоты таблицы - PullRequest
Новая
       9

Не изменять высоту строки таблицы при увеличении всей высоты таблицы

0 голосов
/ 04 июля 2018

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

Вопрос

Можно ли сделать так, чтобы строка (в моем примере та, что с заголовками) всегда оставалась на своей минимальной высоте? В качестве аналогии я вижу указание flex-grow: 0 на элемент Flex.

Без фиксированной высоты

Я не хочу устанавливать для этой строки фиксированную высоту (например, установить на ней height: <fixed value in px>), просто сделайте ее высоту естественным минимумом для рендеринга всего содержимого.

Код

FIDDLE с примером кода для работы. Снимок экрана ниже.

Я хочу, чтобы первая строка в правой таблице (.Table-Row--NotResizable) была такой же высоты, как и первая строка в левой таблице.

enter image description here

HTML 

<div class="TableDisplay">
  <table class="Table Table--Natural">
    <tr>
      <th>Artist</th>
      <th>Song</th>
    </tr>
    <tr>
      <td>Prince</td>
      <td>Kiss</td>
    </tr>
      <tr>
      <td>Bob Dylan</td>
      <td>Idiot Wind</td>
    </tr>
  </table>

  <table class="Table Table--Full">
    <tr class="Table-Row--NotResizable">
      <th>Artist</th>
      <th>Song</th>
    </tr>
    <tr>
      <td>Prince</td>
      <td>Kiss</td>
    </tr>
      <tr>
      <td>Bob Dylan</td>
      <td>Idiot Wind</td>
    </tr>
  </table>
</div>

CSS 

html,
body {
  height: 100%;
  min-height: 100%;
}

.TableDisplay {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
}

.Table {
  height: 100%;
  border-collapse: collapse;
}

.Table td,
.Table th {
  border: 1px solid black;
}

.Table--Full {
  height: 100%;
}

.Table--Natural {
  height: auto;
}

/* Make this row do not participate in height changes */
.Table-Row--NotResizable {
   /* ??? */
}

1 Ответ

0 голосов
/ 04 июля 2018

На самом деле фиксированное значение в px - это именно то, что вы должны использовать: 

.Table-Row--NotResizable {
    height: 1px;
}

Если вы установите его в 1px, то браузер изменит его размер до размера, необходимого для размещения контента. Содержимое таблицы должно вписываться в ячейку таблицы, поэтому высота не будет меньше, и, поскольку любое (непустое) содержимое будет больше 1 пикселя, оно также не будет больше необходимого минимума.

...