2

Tenho 2 retângulos na tela que servem para que dados sejam exibidos dentro deles.

Porém quando tem muita informação os dados ultrapassam seu tamanho. Quero fazer com que os dados não o ultrapasse e ao passar o mouse por cima as informações sejam mostradas por completo. Cada retângulo é um link que redireciona para outra página.

function Atualizar() {
    window.location.reload();
}
#tudo {
    margin: 50px 0px 0px 23px;
}

.position_box {
    position: relative;
    width: 30.5%;
    height: 160px;
    background-color: #D9D9F3;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
}

.estilo:hover {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-transition: 0.5s;
    z-index: 1; /*Faz o elemento ficar a cima dos outros*/
}

a:link, a:visited, a:active {
    text-decoration: none;
    color: #000;
}

.titulo {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.estilo_tab {
    padding-right: -30px;
    width: -60%;
    border-color: #000;
}

table td {
    font-size: 14.8px; /*Tamanho fonte resultados*/
    font-weight: bold;
}

table tr {
    font-size: 10.5px;
}
<!--Primeira Linha de Box's-->
<body onload="setTimeout('Atualizar()',300000)">
    <!--Chamando a função 'Atualizar()' e configurando um tempo de 5 minutos--> 

    <div id="tudo">
        <a href="#">
            <div class="position_box estilo">
                <span class="titulo">
                    <p>Itens por Célula</p>
                </span>
                <table border="1">
                    <tr>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                    </tr>
                    <tr>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                    </tr>
                </table>
            </div>
        </a>

        <a href="#">
            <div class="position_box estilo">
                <span class="titulo">
                    <p>Valor Estoque (WM)</p>
                </span>
                <table border="1">
                    <tr>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                    </tr>
                    <tr>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                    </tr>
                </table>
            </div>
        </a>
    </div>
</body>

4
  • Veja que você está colocando uma tabela extensa para o tamanho do quadrado. A menos que crie um scroll horizontal no box, com a tabela desse tamanho,a mesma continuará fora da caixa.
    – Jorge.M
    19/09/2018 às 12:50
  • Valeu @JorgeMatheus Como faço para criar um scroll horizontal? 19/09/2018 às 12:54
  • Coloca overflow: auto; na classe .position_box e olha se resolve. se não for o que vc precisa comenta ai
    – hugocsl
    19/09/2018 às 12:59
  • Você pode evitar que a table exceda o tamanho div usando table-layout: fixed, e para que o texto não exceda o tamanho da td, overflow: hidden. 19/09/2018 às 13:09

1 Resposta 1

1

Como citei no comentário acima, você está colocando uma tabela muita extensa para o tamanho do seu box.

Use overflow na sua caixa position_box para criar uma barra de rolagem quando o tamanho da tabela ultrapassar o tamanho do box.

#tudo {
    margin: 50px 0px 0px 23px;
}

.position_box {
    position: relative;
    width: 30.5%;
    height: 160px;
    background-color: #D9D9F3;
    float: left;
    margin-left: 20px;
    margin-bottom: 20px;
    overflow: auto;
}

.estilo:hover {
    -webkit-transform: scale(1.15);
    -ms-transform: scale(1.15);
    transform: scale(1.15);
    -webkit-transition: 0.5s;
    z-index: 1; /*Faz o elemento ficar a cima dos outros*/
}

a:link, a:visited, a:active {
    text-decoration: none;
    color: #000;
}

.titulo {
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.estilo_tab {
    padding-right: -30px;
    width: -60%;
    border-color: #000;
}

table td {
    font-size: 14.8px; /*Tamanho fonte resultados*/
    font-weight: bold;
}

table tr {
    font-size: 10.5px;
}
<!--Primeira Linha de Box's-->
<body onload="setTimeout('Atualizar()',300000)">
    <!--Chamando a função 'Atualizar()' e configurando um tempo de 5 minutos--> 

    <div id="tudo">
        <a href="#">
            <div class="position_box estilo">
                <span class="titulo">
                    <p>Itens por Célula</p>
                </span>
                <table border="1">
                    <tr>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                    </tr>
                    <tr>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                    </tr>
                </table>
            </div>
        </a>

        <a href="#">
            <div class="position_box estilo">
                <span class="titulo">
                    <p>Valor Estoque (WM)</p>
                </span>
                <table border="1">
                    <tr>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                    </tr>
                    <tr>
                        <td>Info</td>
                        <td>Info</td>
                        <td>Info</td>
                    </tr>
                </table>
            </div>
        </a>
    </div>
</body>

7
  • Muito obrigado me ajudou bastante. Tem como fazer com que os dados não ultrapassem o box, por mais que sejam bastantes? 19/09/2018 às 13:06
  • @GuilhermeWayne, dentro de uma tabela não, pois você não consegue criar uma quebra de dados. Se lhe foi útil, você pode aceitar a resposta.
    – Jorge.M
    19/09/2018 às 13:08
  • Obrigado. Novamente me ajudou bastante. Vou procurar outra forma de exibir uma quantidade grande de dados. 19/09/2018 às 13:10
  • @GuilhermeWayne o que achas de usar listas?
    – Jorge.M
    19/09/2018 às 13:11
  • Mas consigo fazer com que elas fiquem dentro do meu box? 19/09/2018 às 13:13

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 .