我对html和css非常陌生。
我在包装器中的容器div中的表中有一些单选按钮，每次我放大，比如500%放大，包含单选按钮的div都会离开div，不受任何限制
你们能帮我一把吗？？
下面是我的代码，感谢您的帮助！！！！！
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>所有这些都是因为数字的宽度和单选按钮本身都是绝对设置的，当边距和填充的限制结束时，这些元素就会超出块。你可以用两种方法来解决这个问题-设置这个div的滚动(overflow：auto(或设置相对字体大小和单选按钮(hv，wv，%(