这就是它的样子，您可以看到它向右和底部延伸。我正在尝试修复它但无法修复。我也在使用引导表类。这是我的代码:
HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<table class="table table-bordered">
<tbody>
<tr>
<td class="1"></td>
<td class="2"></td>
<td class="3"></td>
</tr>
<tr>
<td class="4"></td>
<td class="5"></td>
<td class="6"></td>
</tr>
<tr>
<td class="7"></td>
<td class="8"></td>
<td class="9"></td>
</tr>
</tbody>
</table>
</body>
CSS:
table {
width:500px;
height:500px;
position: absolute;
left: 37.25%;
top: 20%;
table-layout: fixed;
}
td {
border:2px solid #428bca;
height:100px;
width: 100px;
}
tr {
background-color:white;
}
我该如何解决这个问题？感谢阅读!
编辑:这就是我希望我的表的样子:
最佳答案
根据我对您想要实现的目标的理解，尝试在您的 CSS 中进行以下更改
table
{
height:800px;
position: absolute;
table-layout: fixed;
}
td
{
border:2px solid #428bca;
height:100px;
width: 100px;
}
tr
{
background-color:white;
}
如果你想让你的表格占据屏幕的整个高度以适应这些框，你需要动态获取屏幕的高度(通过 Javascript)
您可以引用以下页面了解更多详情。 https://www.w3schools.com/jsref/prop_screen_height.asp
干杯
关于html - 为什么我的 HTML 表格会延伸到底部和右侧？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49331153/