Статическая высота таблицы, динамическая высота строк и минимальная высотаCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Anonymous
 Статическая высота таблицы, динамическая высота строк и минимальная высота

Сообщение Anonymous »

Я пытаюсь добиться того, чтобы у меня была таблица со статической высотой, но строки таблицы с динамической высотой и минимальной высотой. Например, у меня есть таблица из 5 строк, каждая строка содержит разное количество данных. Если строка пуста, а все остальные заполнены, я хочу, чтобы пустая строка сжималась до указанной минимальной высоты, а остальные растягивались настолько, насколько им нужно (таблица будет прокручиваться, если она превысит свою высоту, поэтому переполнение: авто). Но если таблица полностью пуста, я хочу, чтобы она сохраняла свою статическую высоту, в то время как все строки таблицы были растянуты, чтобы она хорошо вписывалась.
Теперь я знаю, что вы не можете использовать минимальную высоту в ячейках таблицы. , я просто ищу что-то, что даст такой же эффект.
Это то, чем я сейчас занимаюсь.
Это то, что я пытаюсь достичь.
(У меня будет только 1 таблица, здесь 3, чтобы продемонстрировать несколько сценариев)

Код: Выделить всё






dynamic row height and min height

table {
width: 250px;
height: 300px;
border-style: solid;
border-color: black;
border-width: 0 2px 2px 0;
float: left;
table-layout: fixed;
overflow: auto;
display: inline-block;
background-color: lightgray;
border-spacing: 0;
margin: 20px;
}

thead tr {
border: 2px solid black;
}

table thead th {
border-top: 2px solid black;
border-left: 2px solid black;
background-color: gray;
height: 20px;
}

table thead tr th:nth-child(1){
max-width: 15%;
width: 15%;
}
table thead tr th:nth-child(2){
max-width: 15%;
width: 15%;
}
table thead tr th:nth-child(3){
max-width: 20%;
width: 20%;
}
table thead tr th:nth-child(4){
max-width: 20%;
width: 20%;
}

table td {
border-top: 2px solid black;
border-left: 2px solid black;
height:  2 0 p x ; < b r   / >             } < b r   / >         & l t ; / s t y l e & g t ; < b r   / >     & l t ; / h e a d & g t ; < b r   / >     & l t ; b o d y & g t ; < b r   / >                 & l t ; t a b l e & g t ; < b r   / >             & l t ; t h e a d & g t ; < b r   / >                 & l t ; t r & g t ; < b r   / >                     & l t ; t h & g t ; I D & l t ; / t h & g t ; < b r   / >                     & l t ; t h & g t ; N a m e & l t ; / t h & g t ; < b r   / >                     & l t ; t h & g t ; I n f o & l t ; / t h & g t ; < b r   / >                     & l t ; t h & g t ; D e s c r i p i o n & l t ; / t h & g t ; < b r   / >                 & l t ; / t r & g t ; < b r   / >             & l t ; / t h e a d & g t ; < b r   / >             & l t ; t b o d y & g t ; < b r   / >                 & l t ; t r & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 0 0 1 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 0 2 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 0 3 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 0 4 & l t ; / d i v & g t ; < b r   / >                     & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 1 N & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 2 N & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 3 N & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 4 N & l t ; / d i v & g t ; < b r   / >                     & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 1 i n f o & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 2 i n f o & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 3 i n f o & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 4 i n f o & l t ; / d i v & g t ; < b r   / >                     & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 1 d e s c & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 2 d e s c & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 3 d e s c & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 4 d e s c & l t ; / d i v & g t ; < b r   / >                     & l t ; / t d & g t ; < b r   / >                 & l t ; / t r & g t ; < b r   / >                 & l t ; t r & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 0 0 5 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 0 6 & l t ; / d i v & g t ; < b r   / >                         & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 5 N & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 6 N & l t ; / d i v & g t ; < b r   / >                     & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 5 i n f o & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 6 i n f o & l t ; / d i v & g t ; < b r   / >                     & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 5 d e s c & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 6 d e s c & l t ; / d i v & g t ; < b r   / >                     & l t ; / t d & g t ; < b r   / >                 & l t ; / t r & g t ; < b r   / >                 & l t ; t r & g t ; < b r   / >                     & l t ; t d & g t ; & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; & l t ; / t d & g t ; < b r   / >                 & l t ; / t r & g t ; < b r   / >                 & l t ; t r & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 0 0 7 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 0 8 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 0 9 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 1 0 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 1 1 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 1 2 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 1 3 & l t ; / d i v & g t ; < b r   / >                     & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 7 N & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 8 N & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 9 N & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 0 N & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 1 N & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 2 N & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 3 N & l t ; / d i v & g t ; < b r   / >                     & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 7 i n f o & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 8 i n f o & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 9 i n f o & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 0 i n f o & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 1 i n f o & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 2 i n f o & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 3 i n f o & l t ; / d i v & g t ; < b r   / >                     & l t ; / t d & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 7 d e s c & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 8 d e s c & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 9 d e s c & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 0 d e s c & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 1 d e s c & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 2 d e s c & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 1 3 d e s c & l t ; / d i v & g t ; < b r   / >                     & l t ; / t d & g t ; < b r   / >                 & l t ; / t r & g t ; < b r   / >                 & l t ; t r & g t ; < b r   / >                     & l t ; t d & g t ; < b r   / >                         & l t ; d i v & g t ; 0 1 4 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 1 5 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 1 6 & l t ; / d i v & g t ; < b r   / >                         & l t ; d i v & g t ; 0 1 7 & l t ; / d i v & gt;


14N
15N
16N
17N


14info
15info
16info
17info


14desc
15desc
16desc
17desc








ID
Name
Info
Descripion





001
002
003


1N
2N
3N


1info
2info
3info


1desc
2desc
3desc
















007
008
009
010


7N
8N
9N
10N


7info
8info
9info
10info


7desc
8desc
9desc
10desc

Подробнее здесь: [url]https://stackoverflow.com/questions/78670793/static-table-height-dynamic-rows-height-and-min-height[/url]
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»