gpt4 book ai didi

html - 如何使表格及其所有内容采用 HTML 中其父容器的确切宽度和高度?

转载 作者:太空宇宙 更新时间:2023-11-04 00:45:46 25 4
gpt4 key购买 nike

我有以下 HTML 文档:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.top {
width: 100%;
height: 40px;
background: rgba(0, 0, 0, 0.75);
border-bottom: 1px solid blue;
position: fixed;
top: 0px;
left: 0;
z-index: 999;
}
.top table {
width: 100%;
border: 1px solid red;
height: 100%;
}
.top table tr td {
padding: 0px;
margin: 0px;
}
.top table td button {
width: 40px;
height: 40px;
}
</style>
</head>
<body>
<div class="top">
<table>
<tr>
<td>
<button>x</button>
</td>
<td>Something</td>
</tr>
</table>
</div>

</body>
</html>

你可以在这里看到它的实际效果:

https://jsfiddle.net/s2uxph1w/

如您所见,顶部栏的高度固定为 40 像素。我希望表格及其所有内容(特别是按钮)的高度正好为 40px。然而,即使没有任何填充或边距,表格的内容似乎也会溢出。为什么是这样?我该如何解决这个问题?

最佳答案

这里的按钮没有溢出,而是表格有默认间距。将以下内容添加到表中:

.top table {
border-spacing:0px;
}

关于html - 如何使表格及其所有内容采用 HTML 中其父容器的确切宽度和高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57242601/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com