为什么 JavaScript "style.display = 'block' 会改变元素的宽度？

Question

我有一个 JavaScript 函数来控制 showing/hiding 某些带有事件侦听器的选定页面。我遇到的问题是切换显示的页面设置为比应有的宽度短得多。

这是函数。

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%。我还在 Whosebug 上找到了一些答案，建议将 display = 'block' 更改为 display = 'table' 或 'inherit' 或 here 上列出的任何其他值，但 <tbody> 元素仍然以非常小的宽度显示。如果有人对此有所了解，或者可以在网站上为我提供更好的答案，我将不胜感激。

Answer 1

<tbody>个元素，默认显示为table-row-group.

将其设置为任何其他值（如 block 或 table）将在 display: table 和 display: table-row 之间放置一些没有意义的东西。

为什么 JavaScript "style.display = 'block' 会改变元素的宽度？

Why does JavaScript "style.display = 'block' change the width of my elements?

html

javascript

css

display