gpt4 book ai didi

html - 固定宽度表中流体列的最小宽度

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

我正在尝试创建一个表格,其中的可变列具有最小宽度。所有其他列都具有固定宽度,不应变宽或变窄。

我可以让流体柱正确地增长和收缩,以便它占用容器中的剩余空间,将最大宽度设置为 900 像素,但是我无法让它采用最小宽度。

这意味着当窗口和容器被挤压时,流体柱被覆盖,而不是此时表现得像固定柱。

将最小宽度应用到 th 和/或 td 不会做任何事情。将 min-wdith 应用于流体 td 内的 div 确实意味着文本具有最小宽度,但是它不会阻止列缩小到小于此最小值,因此文本位于下一列文本的下方。

有什么想法吗?

HTML:

<div class="container">
<table>
<thead>
<tr>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fixed">fixed</th>
<th class="fluid">fluid</th>
<th class="fixed">fixed</th>
</tr>
</thead>
<tbody>
<tr>
<td>fixed</td>
<td>fixed</td>
<td>fixed</td>
<td class="fluid"><div align="left">Some text here which gets truncated, however should have min width</div></td>
<td>fixed</td>
</tr>
</tbody>
</table>
</div>

CSS:

.container {
max-width: 900px;
}

table {
table-layout: fixed;
width: 100%;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}

th.fixed {
width: 100px;
}

th.fluid {
min-width: 100px;
}

td.fluid div {
width: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

td.fluid {
background-color: #aaa;
min-width: 100px;
}

td {
background-color: #ddd;
border-right: 1px solid #333;
}

tr td {
text-align: center;
}

table th, table td {
border-top: 1px solid #333;
}

JSfiddle: http://jsfiddle.net/ajcfrz1g/14/

最佳答案

DEMO

.container {
max-width: 900px;
}

table {
table-layout: fixed;
width: 100%;
min-width: 500px;
border: 1px solid #333;
border-collapse: separate;
border-spacing: 0;
}


th.fixed {
width: 100px;


}

th.fluid {
min-width: 100px;
}

td.fluid div {
width: 100%;
min-width:100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

td.fluid {
background-color: #aaa;
min-width: 100px;
width: 100%;
}

td {
background-color: #ddd;
border-right: 1px solid #333;
}
tr td {
text-align: center;
}
}

table th, table td {
border-top: 1px solid #333;
}

关于html - 固定宽度表中流体列的最小宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25933114/

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