0

Quando a página é diminuída o rodapé nem a barra do topo acompanha a largura da página, ficam cortados. No momento não precisa ser responsivo, apenas que acompanhe a largura da página quando diminuído.

<style type="text/css">

        html,
        body {

            width: 100%;
            height: 100%;
            margin: 0px;
            padding: 0;

        }


        #tab1 td {

            white-space: normal;
            word-wrap: break-word;

        }
        
        table {

            padding-left: 10;
            font-size: 10px;
            font-family: Verdana, Geneva, sans-serif;
            text-align: center;

        }
        
        thead {

            font-weight: bold;
            background-color: #247099;
            text-align: center;
            color: #fff;

        }
        
        
        .tb3 {
            background: url('Sem-Título-1.jpg') no-repeat #3d6599;   
            background-position: left; 
            margin: auto;
            width: 100%;
            border-bottom: 5px solid;
            border-color: #F5F5F5;
            padding-top: 1em;
            padding-bottom: 1em;
            margin-bottom: 2em;

        }
        

         footer {

            color: DarkSlateGray;
            font-size: 10px;
            font-family: Verdana, Geneva, sans-serif;
            text-align: center;
            position: absolute;
            margin-top: 50;
            bottom: 0;
            width: 100%;
            height: 30;
            background-color: #F5F5F5;

        }

        .footerdiv {

            min-height:100%;
            position:relative;
            padding-bottom:50;

        }

    </style>
<html !DOCTYPE>
<head>
    <meta charset="utf-8">
    <title>Exemplo</title>
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    <link href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.css" rel="stylesheet" />

    <script>
        $(document).ready( function () {
    $('#tab1').DataTable();
    
} );
    </script>
    
    
</head>

<body>
    <div class="footerdiv">
    <table class="tb3">
        <tr>
            <td></td>
        </tr>

    </table>

    
    <table class="display nowrap" id="tab1" style="width:100%">
        <thead>
            <tr>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
                <th>Lorem ipsum</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
             <tr>
                <td class="td1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>
                <td class="td6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla cursus nunc sit amet nisl lobortis consequat. Nullam efficitur elit ut aliquet pellentesque.</td>

            </tr>
            
        </tbody>
    </table>
    <footer>
        <font>

            Lorem ipsum dolor sit amet
        </br>
        Lorem ipsum dolor sit amet

        </font>
    </footer>
</div>
</body>

</html>

5
  • Eu estou lendo a documentação do js Datatables e não encontrei nada a respeito de formatação e estilo das barras que você citou(search no topo e page index no rodapé). O foco da API é somente a exibição dos dados. Commented 27/04/2019 às 15:21
  • Vc fala da Barra Azul no topo e da Barra Cinza na base? Se for delas elas já estão acompanhando o tamanho da página sim! prntscr.com/nhof7e coloquei uma borda preta para vc ver que está tudo dentro da página
    – hugocsl
    Commented 27/04/2019 às 18:53
  • @hugocsl, eu acho que as barras que ele se refere são a que em cima está escrito Show 10 entries Search ˾̅_̅_̅_̅_̅_̅_̅_̅_̅_̚ e a barra de baixo é a que está escrito Showing 1 to 7 of 7 entries Commented 27/04/2019 às 21:28
  • @hugocsl são essas barras mesmo, quando a página está em 100% elas ficam na tela toda. Mas tente diminuir a página do browser e mecha a barra horizontal, o footer e a barra superior ficam cortadas e não acompanham a largura da página. Commented 27/04/2019 às 22:00
  • @hugocsl i.imgur.com/H5WgYQX.png Commented 27/04/2019 às 22:14

3 Respostas 3

1

Valeu pela sugestão de todos, eu bati muita cabeça a respeito desse problema mas no fim consegui resolver. O problema era relacionado com a api da tabela, editei o script da tabela adicionando essas linhas:

scrollY:        '100vh',
scrollCollapse: true,

E foi solucionado.

0

Oi, tudo bom?

tenta corrigir a primeira parte do seu CSS colocando "width: max-content;". Vai ficar assim:

html,
body {

    width: max-content;
    height: 100%;
    margin: 0px;
    padding: 0;

}

Se eu compreendi o seu problema, acredito que isso resolve. Até mais

1
  • Olá, obrigado pela sugestão. Tentei fazer essa mudança mas a barra horizontal fica imensa e desproporcional mesmo com a página em 100%. Commented 27/04/2019 às 21:53
0

Aparentemente, o problema não está no tamanho do header ou footer, e sim na tabela se excedendo à direita. Acredito que o problema esteja neste seletor que encontrei no Devtools:

table.dataTable.nowrap th, table.dataTable.nowrap td {
<br/>
**white-space: nowrap;**
<br/>
} (jquery.dataTables.css:177)

Essa propriedade está impedindo que o texto quebre, fazendo com que a tabela assuma a largura máxima disponível. Talvez ela seja própria de elementos das tabelas, mas você pode tentar resolvê-la colocando

table td, table th {
   white-space:normal;
}
1
  • Olá, obrigado pela sugestão, porém meu problema é com a layout da página e não só da tabela, fazendo essa alteração a formatação do texto da tabela se expande e a largura da página aumenta, o que não é o ideal e também continua com o problema de cortar o footer e a barra superior azul. i.imgur.com/Cuv6pEW.png Commented 27/04/2019 às 22:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .