为什么JavaScript；style.display='；区块'；更改我的元素的宽度？

我有一个

JavaScript

函数来控制使用事件侦听器显示/隐藏某些选定页面。但我遇到的问题是，切换到显示的页面设置为比实际宽度短得多的宽度

这就是函数

功能显示页（第页）{
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=函数（）{
showPage（this.dataset.page）；
}           
});
});

下面是它使用的

HTML

的一个示例

{QBpage%中q的百分比}
{{q.player_name}
添加
{{q.team}}
{{q.position}}
{{q.points}}
{%endfor%}

由于该函数的目标是

元素，我试图超越该元素的

宽度

的样式，但它仍然不好，尽管页面属性说它的

宽度

是100%。我还在Stackoverflow上找到了一些答案，建议将

display='block'

更改为

display='table'

或

'inherit'

或上面列出的任何其他值，但

元素的显示宽度仍然很小。如果有人知道这方面的任何情况，或者可以在网站上为我指出更好的答案，我将非常感激。

元素默认显示为

表行组

---

将其设置为任何其他值（如

块

或

表

）将在

显示：表

和

显示：表行

之间放置一些没有意义的内容。

你救了我的命。现在，如果我能得到过去几个小时我花在试图解决这个。。。