Почему моя таблица HTML становится вдвое меньше, когда я добавляю 'display: block;' к CSS?

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%;
    }

О экране мобильного устройства необходимо использовать медиазапросы. Это длинный топи c, поэтому я дам вам ссылку на некоторые документы об этом: https://developer.mozilla.org/es/docs/CSS/Media_queries