Tenho um modal que mostra uma tabela com algumas informações adicionais a partir de uma outra tabela (Chamarei de tabelaP), o problema e que a tabelaP possui muitos itens, o que a torna relativamente grande, e a tabela que está no modal é gerada a partir dela, tornando o Modal gigantesco também, o problema é que a tabelaP quando imprimida, me dá a opção de rolagem, porém o modal não tem essa opção de rolagem deixando a tabela enorme e cortando a mesma: Então gostaria de fixar um tamanho para o meu Modal e que caso a tabela seja grande, tenha uma opção de rolagem dentro do modal:
Segue CSS: modal_qm.css
body {
color: #333;
font-family: 'Helvetica', arial;
}
.wrap {
padding: 40px;
text-align: center;
float: left;
}
.btn {
background: #808080;
border: #808280 solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #808280;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333 solid 1px;
border-radius: 5px;
margin-left: -400px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 800px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal-body {
padding: 20px;
max-height: 50px;
overflow: auto;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eee solid 1px;
text-align: right;
}
Segue o trecho HTML/PHP que gera o Modal com a tabela:
<link rel="stylesheet" type="text/css" href="modal_qm.css"/>
<div class="wrap">
<a href="#modal-one" class="btn btn-big">Tabelas consultadas</a>
</div>
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>Tabelas - QuotesMem</h2>
<a href="#" class="btn-close" aria-hidden="true">x</a>
</div>
<div class="modal-body">
<table>
<tbody>
<?php
echo '<tr align="center">';
echo '<th>' .Papel. '</th>';
for($h = 1; $h < $k + 1; $h++){
$nome = "Tabela Server";
$hora_top = "$nome $h";
echo '<th>' .$hora_top. '</th>';
}
echo '</tr>';
for($n = 0; $n < $j; $n++){
echo '<tr>';
$trans = $mat[$n][(($k*2)+3)];
echo '<td class='.$trans.'>' .$mat[$n][0]. '</td>';
for($o = 0; $o < $k ; $o++){
echo '<td class='.$trans.'>'.$mat[$n][(($k*2)+2)].'</td>';
}
echo '</tr>';
}
?>
</tbody>
</table>
</div>
<div class="modal-footer">
<a href="#" class="btn">Voltar</a>
</div>
</div>
</div>
Modal fica "maior" que a tela e não traz a barra de rolagem
Edit1: Alterei a pergunta para mostrar a tabela como ela está agora
height
para o modal e daroverflow: auto;
?