Information goes beyond the place of display

Navigation
2

I have 2 rectangles on the screen that serve to display data within them.

But when you have a lot of information the data goes beyond its size. I want to make sure that the data does not go over it, and by hovering over the information 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>
    
asked by anonymous 19.09.2018 / 14:30

1 answer

1

As I mentioned in the comment above, you are placing a very large table for the size of your box .

Use overflow in your position_box box to create a scroll bar when the table size exceeds the size of the 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>
    
19.09.2018 / 15:04
Navbar does not change content Regulation of svg