Information exceeds the display location

Asked

Viewed 19 times

2

I have 2 rectangles on the screen that serve for data to be displayed inside them.

But when you have a lot of information, the data exceeds its size. I want to make sure that the data does not exceed it and when passing the mouse over the information is shown completely. Each rectangle is a link that redirects to another page.

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>

javascript html html5 css3

  • See that you are placing an extensive table for the size of the square. Unless you create a scroll horizontal in the box, with the table of this size,.

  • Thanks @Jorgematheus How do I create a horizontal scroll?

  • Puts overflow: auto; in the class . position_box and see if it resolves. if it’s not what you need to comment there

  • You can prevent the table from exceeding the div size by using table-layout: fixed, and so that the text does not exceed the size of the td, overflow: hidden.

1 answer

1


As I mentioned in the comment above, you are putting a very extensive table for your size box.

Use overflow in your box position_box to create a scroll bar when the table size exceeds the box size.

#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>

  • Thank you very much helped me a lot. It has how to make the data do not exceed the box, even if they are enough?

  • @Guilhermewayne, not inside a table, because you cannot create a data break. If it has been useful to you, you can accept the answer.

  • Thanks. Again it helped me a lot. I will look for another way to display a large amount of data.

  • @Guilhermewayne what you think of wearing listas?

  • But I can get them inside my box?

  • Yes, but you will have the same size problem. In the case of lists, the scroll would be vertical

  • Thank you very much.

Show 2 more comments

Browser other questions tagged javascript html html5 css3

You are not signed in. Login or sign up in order to post.