Невозможно изменить высоту стола
У меня есть таблица, и я хочу изменить ее высоту, но когда я добавляю элемент высоты в css, ничего не меняется, я также пробовал решение для stackoverflow (Не могу установить высоту стола), но, похоже, ни одно из них не работает. Что я делаю неправильно?
HTML -
<div class = "tableDiv">
<table class = "table table-bordered table-condensed" id = "StoreData">
<thead>
<tr>
<th>County / Admin district</th>
<th>Postcode</th>
<th>Longitude</th>
<th>Latitude</th>
</tr>
</thead>
{% for Postcode, LongLat in LocationData.items() %}
<tr>
<td>{{ LongLat[0] }}</td>
<td>{{ Postcode }}</td>
<td>{{ LongLat[1] }}</td>
<td>{{ LongLat[2] }}</td>
</tr>
{% endfor %}
</table>
</div>
CSS-
<style media = "screen">
html, body, table {
height: 100%;
}
.tableDiv {
height: 50%;
}
table thead {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: white;
color: black;
}
#storeform {
margin-left: 700px;
margin-top: 50px;
margin-bottom: 50px;
}
#StoreData {
margin: 10px auto;
padding: 10;
width: 1250px;
overflow-y: scroll;
}
</style>
Любая помощь будет оценена по достоинству.
@adel Спасибо за комментарий, похоже, это не сработало.
Вы хотите изменить высоту или таблицу div?
@adel Высота таблицы, решение, которое я нашел и связал в вопросе, сказало мне обернуть таблицу в div и добавить к ней высоту.
Но вам нужно добавить высоту в вашу таблицу: добавьте html, body, table {height: 100%}, теперь таблица будет занимать полную высоту div, которая составляет 50%
@adel не работает :/, я обновлю свой css, чтобы вы могли видеть
Вот codepen: codepen.io/iziz96/pen/XwxKZJ я не знаю, почему он не работает!
@adel Я вижу, что это работает в codepen, я найду способ решить эту проблему, спасибо за помощь!
Ответы 1
Фиксированный макет
Таблицы по своей природе соответствуют своему содержанию. Все, что находится внутри <td>, влияет на ширину и высоту <td>s и, в свою очередь, влияет на <tr>, затем на <tbody> и, наконец, на <table>. Это поведение по умолчанию задается table-layout:auto, которое применимо только к <table> или элементу-контейнеру с display: table или display: inline-table. Единственным другим значением для table-layout является fixed. Таблица "фиксированный" дает разработчику больший контроль над поведением таблицы, учитывая любую указанную ширину, указанную для любого <th> (если нет <th>, то <td> вверху tr>). Поскольку используется BootStrap, мы можем присвоить .table-fixed class <table> эквивалент table {table-layout: fixed}`.
Теперь, чтобы управлять содержимым внутри <td>, поместите <div> или любой аналогичный элемент блочного уровня в каждый <td>. Если вы хотите получить min-width или width любой строки, просто примените их только к одному из <div>. Обратите внимание, что добавлены дополнительные строки, и у каждой на самом деле есть содержимое: # или неразрывный пробел, который предотвращает схлопывание пустой ячейки — альтернативой является присвоение каждой <div>min-height.
<div>, содержащий таблицу, имеет класс BS .table-responsive и имеет высоту 50% от высоты <body> (также 100% по умолчанию BS). Такая компоновка облегчает внешнее управление столом.
Теперь у нас есть контроль над шириной таблицы и косвенно высотой таблицы. При добавлении содержимого и явном задании ширины столбца содержимое будет переноситься на следующую строку, а не растягиваться на ячейку. В свою очередь, по мере того, как ячейка получает каждую строку, так же, как и строка, и т. д.
Не все на 100% из-за множества неизвестных факторов, которые могут иметь или не иметь ваш реальный макет, поэтому при комментировании, пожалуйста, не говорите "Это не работает". Сначала установите любые детали, которые мы пропустили, а затем то, что вы наблюдаете, что не работает и как это должно работать/выглядеть.
Демо
html,
body {
height: 100%;
}
.table-responsive {
height: 50%;
}
table {
height: 100%;
}<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel = "stylesheet">
<div class = "table-responsive">
<table class = "table table-bordered table-condensed table-fixed" id = "StoreData">
<thead>
<tr>
<th class = "col-xs-4">County / District</th>
<th class = "col-xs-2">Zip Code</th>
<th class = "col-xs-3">Longitude</th>
<th class = "col-xs-3">Latitude</th>
</tr>
</thead>
<tr>
<td>
<div>Bermuda Triangle</div>
</td>
<td>
<div>33036</div>
</td>
<td>
<div>25.0000</div>
</td>
<td>
<div>-71.0000</div>
</td>
</tr>
<tr>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
</tr>
<tr>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
</tr>
<tr>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
</tr>
<tr>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
</tr>
<tr>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
</tr>
<tr>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
<td>
<div> </div>
</td>
</tr>
</table>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
Попробуйте добавить html,body{ height:100%}