#javascript #html #css #display
#javascript #HTML #css #отображение
Вопрос:
У меня есть JavaScript
функция для управления отображением / скрытием определенных выбранных страниц с помощью прослушивателя событий. Проблема, с которой я сталкиваюсь, заключается в том, что страницы, которые переключаются на отображение, имеют гораздо меньшую ширину, чем они должны быть.
Это функция.
function showPage(page) {
document.querySelectorAll('tbody').forEach(tbody => {tbody.style.display = 'none';})
document.querySelector(`#${page}`).style.display = 'block';
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('button').forEach(button => {
button.onclick = function() {
showPage(this.dataset.page);
}
});
});
Вот пример HTML
того, с чем он работает.
<tbody id="page1">
{% for q in QBpage %}
<tr>
<th scope="row"></th>
<td>
<h6>{{ q.player_name }}</h6>
</td>
<td>
<button class="btn btn-outline-primary btn-sm m-0 waves-effect" onclick="myFunction('{{ player_data.player_name }} {{ player_data.position }}')">Add</button>
</td>
<td><h6> {{ q.team }} </h6></td>
<td><h6> {{ q.position }} </h6></td>
<td><h6>{{ q.points }}</h6></td>
</tr>
{% endfor %}
</tbody>
Поскольку функция нацелена на <tbody>
элементы, я попытался переопределить стиль этого элемента width
, но это все равно бесполезно, несмотря на то, что атрибуты страницы говорят, что это width
100%. Я также нашел несколько ответов здесь, в Stackoverflow, которые предлагают изменить display = 'block'
на display = 'table'
или 'inherit'
или любое из других значений, перечисленных здесь, но <tbody>
элементы по-прежнему отображаются с очень маленькой шириной. Если кто-нибудь что-нибудь знает об этом или может указать мне на лучший ответ здесь, на сайте, я был бы очень благодарен.
Ответ №1:
<tbody>
элементы по умолчанию отображаются как table-row-group
.
Установка для него любого другого значения (например block
, или table
) поместит что-то между a display: table
и a display: table-row
, что не имеет смысла.
Комментарии:
1. Ты спас мне жизнь. Теперь, если бы я мог получить только последние пару часов, которые я потратил, пытаясь это исправить…