Загрузочный контент, оставляющий отзывчивую таблицу

Question

Я заметил, что загрузочный готовый класс «table-отзывчивый» отлично работает. он дает полосы прокрутки таблицы/div в боковом направлении, когда отображается в мобильном режиме, и там для сохранения окна просмотра.

НО Я также заметил, что этапы содержания за пределами содержащего div и на основной фон div.

Я выполнил изображение ниже (извините полосу прокрутки горизонтально, которую я отключил), но вы можете видеть, что содержимое белого контейнера вышло наружу и на более темный серый/синий цвет.

Ниже приведен пример таблицы (бутстраповские классы)

<div class="row"> 
<div class="col-lg-6"> 
    <div class="panel panel-primary"> 
     <div class="panel-heading">System Vitals</div> 
     <div class="panel-body"> 
      <table id="vitals" class="table table-hover table-responsive"> 
       <tr> 
        <th>Hostname</th> 
        <td><span data-bind="Hostname"></span></td> 
       </tr> 
       <tr> 
        <th>Listening IP</th> 
        <td><span data-bind="IPAddr"></span></td> 
       </tr> 
       <tr> 
        <th>Kernel Version</th> 
        <td><span data-bind="Kernel"></span></td> 
       </tr> 
       <tr> 
        <th>Distro Name</th> 
        <td><span data-bind="Distro"></span></td> 
       </tr> 
       <tr> 
        <th>Uptime</th> 
        <td><span data-bind="Uptime"></span></td> 
       </tr> 
       <tr> 
        <th>Last boot</th> 
        <td><span data-bind="LastBoot"></span></td> 
       </tr> 
       <tr> 
        <th>Current Users</th> 
        <td><span data-bind="Users"></span></td> 
       </tr> 
       <tr> 
        <th>Load Averages</th> 
        <td><span data-bind="LoadAvg"></span></td> 
       </tr> 
       <tr id="tr_SysLang"> 
        <th>System Language</th> 
        <td><span data-bind="SysLang"></span></td> 
       </tr> 
       <tr id="tr_CodePage"> 
        <th>Code Page</th> 
        <td><span data-bind="CodePage"></span></td> 
       </tr> 
       <tr id="tr_Processes"> 
        <th>Processes</th> 
        <td><span data-bind="Processes"></span></td> 
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 

Кто знает, как это исправить, если это ошибка?

Answer 1

Спасибо Michael, ответ на этот вопрос был:
Просто поместите дисплей: блок; на элементе #vitals. jsfiddle.net/shfcmkhv/2 - Michael