Scroll Horizontal para tabela pai x filho

Bom dia, galera,

Tenho uma tabela pai x filho onde tenho várias colunas, e essas colunas não cabem na tela. Queria saber se existe alguma forma de criar um scroll horizontal dentro do painel onde está a tabela, pra que só a tabela se mova... vi uma pergunta parecida aqui no forum onde falavam pra colocar na div pai a classe .table-responsive , porém, não aconteceu nada de diferente na tabela quando faço isso.

Vou deixar abaixo o trecho do código com a tabela:

 <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Recrutamento e Entrevista</h3>
                </div>
                <div class="panel-body">

                    <div class="container" id="divTabela">

                        <div class="row" style="margin-bottom: 20px">

                            <!-- Recrutamento -->
                            <div class="col-md-12" id="divRecrutamento" style="overflow-x: scroll; width: 200%">
                                <table class="table" id="tblRecrutamento" tablename="tblRecrutamento" addbuttonlabel="Adicionar Item" customFnDelete="fnCustomDelete(this)" nodeletebutton="false">

                                    <thead>
                                        <tr>
                                            <td><strong>Nome</strong></td>
                                            <td><strong>Notas dos Testes</strong></td>
                                            <td><strong>Aprovado?</strong></td>
                                            <td><strong>1º Entrevista</strong></td>
                                            <td><strong>Aprovado?</strong></td>
                                            <td><strong>Observações</strong></td>
                                            <td><strong>2º Entrevista</strong></td>
                                            <td><strong>Aprovado?</strong></td>
                                            <td><strong>Observações</strong></td>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        <tr>
                                            <td class="form-group"><input type="text" class="form-control" id="txtNome" name="txtNome" title="Nome" onchange="on_change_Nome()" style="" /></td>
                                            <td class="form-group"><input type="text" class="form-control" id="txtNotasTestes" name="txtNotasTestes" title="Notas dos Testes" onchange="" style="" /></td>
                                            <td class="form-group"><input type="checkbox" class="form-control" id="txtAprovadoTeste" name="txtAprovadoTeste" title="Aprovado?" data-on-color="success" data-off-color="danger" data-on-text="Sim" data-off-text="Não" onchange="" style="" /></td>
                                            <td class="form-group"><input type="date" class="form-control" id="txt1Entrevista" name="txt1Entrevista" title="1º Entrevista" onchange="" style="" /></td>
                                            <td class="form-group"><input type="checkbox" class="form-control" id="txtAprovado1" name="txtAprovado1" title="Aprovado?" data-on-color="success" data-off-color="danger" data-on-text="Sim" data-off-text="Não" onchange="" style="" /></td>
                                            <td class="form-group"><input type="text" class="form-control" id="txtObservacaes1" name="txtObservacaes1" title="Observações" onchange="" style="" /></td>
                                            <td class="form-group"><input type="date" class="form-control" id="txt2Entrevista" name="txt2Entrevista" title="2º Entrevista" onchange="" style="" /></td>
                                            <td class="form-group"><input type="checkbox" class="form-control" id="txtAprovado2" name="txtAprovado2" title="Aprovado?" data-on-color="success" data-off-color="danger" data-on-text="Sim" data-off-text="Não" onchange="" style="" /></td>
                                            <td class="form-group"><input type="text" class="form-control" id="txtObservacaes2" name="txtObservacaes2" title="Observações" onchange="" style="" /></td>
                                        </tr>

                                    </tbody>

                                </table>
                            </div>

                        </div>

                    </div>

                </div>
            </div>
compartilhar
  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do fluig Forum!

1 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags datatable scroll paifilho ou faça a sua própria pergunta.