Bootstrap 3 Стол внутри панели переполнен

 <div class="col-xs-6 col-sm-4">
         <div class="panel panel-primary">
          <div class="panel-heading">Recently Filtered</div>
          <table class="table table-striped">
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
            <tr><td>Sensor ID</td><td>Temperature</td><td>Voltage</td><td>Date</td>
          </table>
        </div>
</div>

Таблица внутри панели переполнена, когда я увеличиваю масштаб, здесь пример изображения

Какая надлежащая оценка подходит для решения этой проблемы? Я знаю, что он может масштабироваться должным образом.

Ответ 1

Вы всегда можете добавить класс .table-responsive в таблицу, чтобы он прокручивался по горизонтали. Пример:

<div class="table-responsive">
    <table class="table table-striped">
        ...
    </table>
</div>

Если это не то, что вам нужно, вам нужно уменьшить размер шрифта, чтобы он лучше соответствовал.

Ответ 2

похоже, происходит только тогда, когда область просмотра ответила на размеры мобильных устройств. Самое простое исправление заключается в добавлении правила overflow.

.panel {
    overflow: auto;
}

вы также можете изменить размер шрифта или удалить ненужные ячейки таблицы. Вы также можете сокращать

ID
Temp
В
Дата

Ответ 3

Просто идея, вы попытались добавить div с панелью класса класса вокруг таблицы?