#html #css
#HTML #css
Вопрос:
У меня есть таблица, в которой я установил высоты для каждой строки и минимальную высоту, установленную для всей таблицы. Строки автоматически растягиваются по вертикали, чтобы заполнить всю таблицу. Как мне настроить строки так, чтобы они не заполняли всю таблицу по вертикали. Я хочу, чтобы каждая строка имела высоту 40 пикселей. Если имеется только одна строка, под строкой должно быть свободное место, поскольку высота таблицы составляет 200 пикселей. Как мне предотвратить автоматическое заполнение строк таблицы по вертикали? Я хочу, чтобы пробел после первой строки, если других строк нет
<style>
.messages {
display:flex;
}
</style>
<div class="messages">
<div class="card w-75"">
<h5 class="card-header py-3">Messages</h5>
<div class="card-body" style="padding:0;">
<table style="width:100%; min-height:200px; border: 1px solid; text-align: center; display:inline-table;">
<tbody>
<tr style="background-color:darkviolet; height:40px;">
<th style="color:white; border: 1px solid;">Date</th>
<th style="color:white; border: 1px solid;">Subject</th>
<th style="color:white; border: 1px solid;">From</th>
</tr>
<tr style="border: 1px solid; height:40px;">
<td style="border: 1px solid;">12/5/19</td>
<td style="border: 1px solid;">Test</td>
<td style="border: 1px solid;">John Doe</td>
</tr>
<tr style="border: 1px solid; height:40px;">
<td style="border: 1px solid;">12/5/19</td>
<td style="border: 1px solid;">Test</td>
<td style="border: 1px solid;">Jane Doe</td>
</tr>
</tbody>
</table>
</div>
</div>
<button class="btn btn-primary" value="Test" style="height:40px; margin-left:20px; margin-top:60px;">Send A Message</button>
</div>
Комментарии:
1. Переместите
min-height
в переносdiv
.