Локальная таблица перекрытия по содержанию div на мобильном представлении

Question

У меня есть эта проблема, в которой элемент таблицы перекрывается с содержащим div, имеет конкретную высоту и нижнее содержимое. Таблица находится в пределах этого сНу элемента

<div class="inner bg-danger col-lg-12 col-md-12 col-xs-12">table element</div> 

Вот макет https://jsfiddle.net/0rkrd738/

Я хочу, чтобы таблица будет реагировать, чтобы остаться в пределах его контейнера DIV с полным содержанием этого. Я попробовал поставить все классы col-md, lg, xs все равно не помогло. Пожалуйста, помогите мне о том, как решить эту

Answer 1

Вы можете сделать путь изображения меньше и добавьте класс table-responsive к родительскому div div (для действительно маленьких экранов). Вот некоторые CSS:

.bg-danger .img-circle { 
    max-height: 150px; 
    width: auto; 
} 
.bg-danger .table-responsive { 
    margin-bottom: 0; 
} 
.bg-danger .panel-body { 
    padding-bottom: 0; 
} 

см скрипка https://jsfiddle.net/0rkrd738/3/

Answer 2

Если вы хотите все, чтобы поместиться внутри фиксированной высоты DIV, что вам нужно сделать все внутри DIV меньше, так что подходит, см скрипку https://jsfiddle.net/0rkrd738/2/

.red { 
    background-color: red; 
    height: 600px; 
} 

.blue { 
    background-color: blue; 
    height: 600px; 
} 

.yellowgreen { 
    height: 500px; 
} 

.panel { 
    height: 560px; 
} 

.panel-body { 
    padding-top: 0px; 
    padding-bottom: 0px; 
} 
.panel-footer { 
    padding-top: 4px; 
    padding-bottom: 4px; 
} 
td { 
    padding: 1px !important; 
} 
table{margin-bottom: 0px !important;}