Это может звучать как нубский вопрос, но я не могу на всю жизнь изменить высоту тела моего стола. Я хочу, чтобы он мог прокручиваться с помощью свойства overflow-y, но я не могу настроить высоту таблицы, даже после присвоения свойству height определенного значения.
Вот мой css для моей таблицы
#itemstable {
border-collapse: collapse;
width: 100%;
}
#itemstable td {
max-width: 115px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: 1px solid #f7f5e6;
padding: 8px;
}
#itemstable table {border: 2px solid var(--Blue)}
#itemstable tr:nth-child(even){background-color: var(--LightBlue);}
#itemstable tr:nth-child(odd){background-color: var(--LighterBlue);}
#itemstable tbody tr:hover {
background-color: var(--AccentBlue);
color: white;
cursor: pointer;
}
#itemstable th {
padding: 4px;
text-align: center;
background-color: var(--Blue);
color: white;
}
.InvTable{
height: 100%;
width: 1300px;
text-align: center;
margin-right: auto;
margin-left: auto;
table-layout: fixed;
}
.InvTable .TableHeaderContainer {
border: 2px solid var(--Blue);
background-color: var(--Blue);
color: white;
text-align: center;
width: 80%;
margin-right: auto;
margin-left: auto;
}
А вот мой html
<div>
<div className="InvTable">
<table id="itemstable" style={{border: '2px solid #333a56'}}>
<thead>
<tr>
<th>Vendor</th>
<th>P.O #</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{this.RenderTableBody()}
</tbody>
</table>
</div>
</div>
Я попытался установить высоту каждой из моих переменных css, но ничего не изменилось, таблица остается той же высоты. Если бы кто-нибудь мог помочь мне понять, почему я не могу изменить высоту своего стола, это было бы здорово! Спасибо.