gpt4 book ai didi

css - 调整特定表格单元格的宽度而不影响其他单元格

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

我希望表格列宽保持在 50%,但在不影响其他行的情况下像图片中那样调整突出显示行的大小。

我用

white-space: nowrap;

enter image description here

已更新

我通过这个解决了这个问题。

table.border-outline tr:nth-child(2) .table-share-row-even:nth-child(2) .data-column{
position: absolute;
white-space: nowrap;
right: -1px;
}

最佳答案

HTML 表格行为是固定的,很难操作。您可以阅读更多相关信息 here .这就是为什么大多数人不使用 table 标签来创建表格,而是制作称为 div 表格的东西 - 由 div 标签组成的表格。您可以像这样使用 div 表来执行您想要的操作:

.div-table {
display: table;
width: 300px;
}
.div-table-row {
display: table-row;
background-color: #ccc;
}
.div-table-row:nth-child(even) {
background-color: white;
}
.div-table-col {
float: left;
display: table-column;
}
.div-table-col:nth-child(odd) {
width: 20%;
}
.div-table-col:nth-child(even) {
width: 80%;
text-align: right;
}
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">Share Series</div>
<div class="div-table-col">VEON ADS (NASD)</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Time</div>
<div class="div-table-col">02/27/2019 16:00 (GMT-05:00)</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Currency</div>
<div class="div-table-col">USD</div>
</div>
<div class="div-table-row">
<div class="div-table-col">Market</div>
<div class="div-table-col">NASDAQ</div>
</div>
<div class="div-table-row">
<div class="div-table-col">ISIN</div>
<div class="div-table-col">US91822M1062</div>
</div>
</div>

关于css - 调整特定表格单元格的宽度而不影响其他单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54918491/

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