Opening a full size Table

Question

Well I have the following doubt. I have this table in my project.

The user complains about the size because the scrollbars appear, as the page already has a lot of information can not increase it (and also I would use this code on other screens).

I would like the user to click on a button appeared this complete table in a modal for example. ( I tried but when I put the table in the modal-body it ignores the modal, and printed the modal data on the screen itself.)

Chama Modal

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-zoom-in"></span></button>

Code :

 <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
              <div class="modal-dialog modal-lg">
                <div class="modal-content">
                  <div class="modal-header" style="background: ${cortop}; color: ${corletra}; ">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Tabela</h4>
                  </div>
                  <div class="modal-body">
                    <p>
                        <table width="560" height="49" class="table table-condensed" border="1" cellspacing="0" bordercolor="#FFFFFF">
                            <thead class="fixedHeader">
                                <tr bgcolor="${cortop}">
                                    <th width="20" height="23">&nbsp;</th>
                                    <th width="33" align="left">Data</th>
                                    <th width="71" align="left">C&oacute;digo</th>
                                    <th width="145" align="left"><strong>Descri&ccedil;&atilde;o</strong></th>
                                    <th width="72" align="center">Qtd</th>
                                    <th width="113" align="left">Valor</th>
                                    <th width="156" align="left">Grau</th>
                                    <th width="156" align="left">Profissional</th>
                                </tr>
                            </thead>
                            <c:forEach var="item" items="${PDA}">
                                <c:set var="total" value="${total + item.valorTotal}" />
                                <tr bgcolor="#F4F4F4" title="${item.tipoFaturamento}">
                                    <td height="24" ><input type="radio" name="radio3" id="radio3" value="radio3" onclick="SelectExcl(${item.idConta},${item.conta}, '${item.tiss}', ${item.qtd}, '${item.grauParticipacao}', ${item.acrescimo}, '${item.hora}', '${item.viaAcesso}', '${item.tecnicaU}');" /></td>
                                    <td nowrap="nowrap" ><fmt:formatDate pattern='dd/MM/yy' value='${item.data}'/>
                                    &nbsp;&nbsp;</td>
                                    <td nowrap="nowrap" >${item.tiss}</td>
                                    <td nowrap="nowrap" title="${item.medico}" >${item.descricao}</td>
                                    <td align="center" nowrap="nowrap" >${item.qtd}</td>
                                    <td align="right" nowrap="nowrap" ><a href="#" onclick="abreJanela('<%=request.getContextPath()%>/controlador?acao=AlterarValorProced&amp;op=1&amp;procedimento=${item.descricao}&amp;grau2=${item.grauParticipacao}&amp;acrescimo=${item.acrescimo}&amp;valor2=${item.valorUnitario}&amp;idconta=${item.idConta}&amp;quant=${item.qtd}', 'alterarValor', 500, 150);">${item.valorTotal}</a></td>
                                    <td nowrap="nowrap" >${item.grauParticipacao}</td>
                                    <td nowrap="nowrap" >${item.obs}</td>
                                </tr>
                            </c:forEach>
                        </table>
                   </p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                  </div>
                </div>
              </div>
            </div>   

Or if there’s a better way to do it, as you do ?

Answer 1

If you’re using the bootsrap 3maybe this will help : DEMO

.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}