gpt4 book ai didi

css - 将固定定位表格单元格的内容对齐到右侧?

转载 作者:行者123 更新时间:2023-11-28 05:35:13 26 4
gpt4 key购买 nike

是否可以将具有固定位置的表格单元格的内容右对齐?

请查看下面的演示 - 第三个黄色框应该粘在响应式白色容器的右侧。

请注意必须保留固定位置和表格单元格。

body {
background-color: grey;
}
.container {
width: 100%;
background-color: white;
margin: 0 auto;
max-width: 80%;
}
table {
width: 100%;
}
.first {
;
position: fixed;
background-color: red;
}
.second {
width: 50%;
background-color: black;
color: white;
text-align: center;
}
.third {
text-align: right;
position: fixed;
background-color: yellow;
}
<body>
<div class="container">
<table>
<tr>
<td class="first">First</td>
<td class="second">Second</td>
<td class="third">Third</td>
</tr>
</table>
</div>
</body>

最佳答案

我知道你写过必须保留固定位置,但是固定定位的表格单元格是一个非常奇怪的概念,我希望这在每个浏览器中看起来都不一样,因为固定定位元素的位置通常只与视口(viewport)(窗口),在表格中是无用的。

在下面的解决方案中,我给第一个和第三个单元格 width: 25% 使它们的宽度独立于它们的内容,并将它们的内容放在 span 标签中以使文本对齐工作无需将背景颜色分布在整个单元格宽度上。我希望这对你有用。

body {
background-color: grey;
}
.container {
width: 100%;
background-color: white;
margin: 0 auto;
max-width: 80%;
}
table {
width: 100%;
}
.first {
width: 25%;
}
.first > span {
background-color: red;
}
.second {
width: 50%;
background-color: black;
color: white;
text-align: center;
}
.third {
width: 25%;
text-align: right;
}
.third > span {
background-color: yellow;
}
<body>
<div class="container">
<table>
<tr>
<td class="first"><span>First</span></td>
<td class="second">Second</td>
<td class="third"><span>Third</span></td>
</tr>
</table>
</div>
</body>

关于css - 将固定定位表格单元格的内容对齐到右侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38271226/

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