我的问题是为什么 td 中的 p 标签会根据
完整的表格？
我想要的是 top: 100% 是 td 高度的 100%，而不是 table 高度的 100%。
这很可能是我似乎没有注意到的一些简单错误 所以我想如果你们能帮我找到那个错误或者帮我设计风格 我的文本基于表格数据。
jsfiddle:https://jsfiddle.net/7oyxc1jh/
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> test </title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<table id="buyingOptions">
<tr>
<td>
<p class="name"> PandaFeeder </p>
<p class="productioning">Production: <span id="pandaFeederProduction"> 2 </span> </p>
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
</table>
</body>
</html>
CSS:
html,body {
height: 100%;
width: 100%;
}
table{
position: relative;
width: 100%;
height: 30%;
text-align: center;
}
td,tr{
width: 100%;
height: 30%;
border: 2px solid black;
}
.name{
position: absolute;
top: 0;
left: 4%;
}
.productioning{
position: absolute;
top: 100%;
left: 4%;
}
最佳答案
只需添加:
td {
position: relative;
}
到您的样式定义。绝对定位时，浏览器必须知道相对于哪个元素应该定位绝对元素。在这种情况下，您会喜欢“td”。检查更新的 fiddle :https://jsfiddle.net/7oyxc1jh/2/
另请注意，“top: 100%”在本例中的意思是“位于包含(相对)元素的底部，因此在您的例子中它将出现在第二行。
关于html - 为什么我的 td 内的 p 标签会根据整个表格设置样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43705985/