Почему JavaScript "style.display = 'block' изменяет ширину моих элементов?

#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 , что не имеет смысла.