Elements going out of div when zooming in

September 23, 2022

im pretty new to html and css.

I have some radio buttons inside a table in a container div thats inside a wrapper and everytime i zoom in, like 500% zoom, the div containing the radio buttons just goes out of the div not respecting any limits

Could u guys please give me a hand??

Down here is my code, appreciate the help!!!!!

body {
    margin: 0;
    user-select: none;
}

.wrapper_body {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: 100vw;
    height: 100vh;
}

.container {
    text-align: center;
    background-color: rgb(200, 195, 195);
    border: 2px dashed red;
    width: 75%;
}

.table_div {
    margin: 0 auto;
    margin-top: 20px;
    border: 2px dashed red;
    width: 80%;
}

.table1 {
    margin: 0 auto;
    border-collapse: collapse;
    background-color: rgb(232, 227, 227);
    font-family: Arial;
    font-size: 1.4em;
    width: 100%;
}

tr input {
    cursor: pointer;
    width: 20px;
    height: 40px;
}

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tab</title>
    <link rel="stylesheet" href="tabVoos.css">
</head>

<body>
    <div class="wrapper_body">
        <div class="container">
            <div class="table_div">
                <table class="table1">
                    <thead>
                        <tr>
                            <th>1</th>
                            <th>2</th>
                            <th>3</th>
                            <th>4</th>
                            <th>5</th>
                            <th>6</th>
                            <th>7</th>
                            <th>8</th>
                            <th>9</th>
                            <th>10</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><input type="radio" name="Q1" value="10"></td>
                            <td><input type="radio" name="Q1" value="9"></td>
                            <td><input type="radio" name="Q1" value="8"></td>
                            <td><input type="radio" name="Q1" value="7"></td>
                            <td><input type="radio" name="Q1" value="6"></td>
                            <td><input type="radio" name="Q1" value="5"></td>
                            <td><input type="radio" name="Q1" value="4"></td>
                            <td><input type="radio" name="Q1" value="3"></td>
                            <td><input type="radio" name="Q1" value="2"></td>
                            <td><input type="radio" name="Q1" value="1"></td>
                            <tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>

>Solution :

All this happens because the width of the digits and the radio buttons themselves are absolutely set, and when the limit of margins and paddings ends, these elements go beyond the block. You can solve this problem in 2 ways – set the scrolling for this div (overflow: auto) or set the relative font sizes and radio buttons (hv, wv, %)