1

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;andoverflow-y: scroll什么都不做。

这里有什么问题？

另外：如何检查用户是否正在使用移动屏幕，并使其表格中的字体更小？

4

1 回答 1

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

于 2020-04-25T20:11:22.413 回答