为什么当我在 CSS 中添加"display： block;"时，我的 HTML 表格变成了它的一半大小？

Question

CSS:

.TFtable{
width:100%; 
border-collapse:collapse; 
overflow-y: scroll;
height: 500px;
display: block;
}
.TFtable td{ 
padding:7px; 
}
/* provide some minimal visual accomodation for IE8 and below */
.TFtable tr{
background: #242526;
}
/*  Define the background color for all the ODD background rows  */
.TFtable tr:nth-child(odd){ 
background: #242526;
}
/*  Define the background color for all the EVEN background rows  */
.TFtable tr:nth-child(even){
background: #343434;
}
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
}

请注意，我的桌子在一个容器里——包装，它在另一个容器里面——包装。

我的桌子，在容器包装里，在桌面屏幕上半个身子，右边只有一个黑色的空间。

发生了什么事？

HTML

<div class="container--wrap">
<table class="TFtable">
...
</table>
</div>

然而，当我移除display: block;时，height:500px;和overflow-y: scroll什么也不做。

这里怎么了？

此外：我如何检查用户是否在使用手机屏幕，并使其在表中的字体更小？

Answer 1

尝试在每个容器中添加一个100%宽度的属性：

.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
width: 100%;
}

关于手机屏幕，您需要使用媒体查询。这是一个很长的话题，所以我给你一个链接到一些关于它的文档：https://developer.mozilla.org/es/docs/CSS/Media_queries