gpt4 book ai didi

html - 如何使表格列的宽度仅占用必要的空间并带有省略号溢出?

转载 作者:太空狗 更新时间:2023-10-29 13:28:26 24 4
gpt4 key购买 nike

我希望我的表格宽度为 100%,并且表格的每一列只占用它需要的空间。如果溢出,则会出现省略号。

没有表格布局:固定;

html, body {
margin: 0;
padding: 0;
font-family: sans-serif; */
}

.account-products-container .table {
width: 100%;
max-width: 100%;
margin: 20px 0;
border-collapse: collapse;
border-spacing: 0;
display: table;
table-layout: auto;
}

.account-products-container .table-striped>tbody>tr:nth-of-type(odd) {
background-color: #eee;
}

.account-products-container .table>thead>tr>th {
padding: 8px;
line-height: 1.428571429;
font-weight: 600;
text-transform: uppercase;
vertical-align: bottom;
border-bottom: 1px solid #DDD;
text-align: left;
}

.account-products-container .table>tbody>tr>td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #DDD;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
<div class="account-products-container">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456789</td>
<td>This is the name of a product that is long</td>
</tr>
<tr>
<td>549490309</td>
<td>This is a product title that is even longer than the first one and longer than the second one because the second one is short, so of course it's longer.</td>
</tr>
<tr>
<td>005948333</td>
<td>This one is short</td>
</tr>
</tbody>
</table>
</div>

这就是我希望列的外观,但是没有 table-layout: fixed;,由于 white-space: nowrap;,表格没有调整大小而是溢出>.

enter image description here

使用表格布局:固定;

html, body {
margin: 0;
padding: 0;
font-family: sans-serif; */
}

.account-products-container .table {
width: 100%;
max-width: 100%;
margin: 20px 0;
border-collapse: collapse;
border-spacing: 0;
display: table;
table-layout: fixed;
}

.account-products-container .table-striped>tbody>tr:nth-of-type(odd) {
background-color: #eee;
}

.account-products-container .table>thead>tr>th {
padding: 8px;
line-height: 1.428571429;
font-weight: 600;
text-transform: uppercase;
vertical-align: bottom;
border-bottom: 1px solid #DDD;
text-align: left;
}

.account-products-container .table>tbody>tr>td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #DDD;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
<div class="account-products-container">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456789</td>
<td>This is the name of a product that is long</td>
</tr>
<tr>
<td>549490309</td>
<td>This is a product title that is even longer than the first one and longer than the second one because the second one is short, so of course it's longer.</td>
</tr>
<tr>
<td>005948333</td>
<td>This one is short</td>
</tr>
</tbody>
</table>
</div>

这响应很好,并且有省略号,但我的专栏不再占用最小空间。

enter image description here

我怎样才能让列只占用他们需要的空间,同时让我的表响应良好?

如果你想玩它:JSFiddle

最佳答案

你可以

  • 使用自动布局以考虑内容
  • 将表格的宽度设置为 100%。它将被视为最小宽度。
  • 将第二列的宽度设置为 100%。然后它会增长,占用所有可用空间(如果有的话)。
  • 为防止第二列因内容而增长更多,将它们包装在绝对定位的容器中。

html, body {
margin: 0;
padding: 0;
font-family: sans-serif; */
}

.account-products-container .table {
width: 100%;
max-width: 100%;
margin: 20px 0;
border-collapse: collapse;
border-spacing: 0;
display: table;
table-layout: auto;
}

.account-products-container .table-striped>tbody>tr:nth-of-type(odd) {
background-color: #eee;
}

.account-products-container .table>thead>tr>th {
padding: 8px;
line-height: 1.428571429;
font-weight: 600;
text-transform: uppercase;
vertical-align: bottom;
border-bottom: 1px solid #DDD;
text-align: left;
}

.account-products-container .table>tbody>tr>td {
padding: 8px;
line-height: 1.428571429;
vertical-align: top;
border-top: 1px solid #DDD;
cursor: pointer;
white-space: nowrap;
}
td:nth-child(2) {
width: 100%;
position: relative;
}
td:nth-child(2):not(:empty)::after {
/* Prevent row from collapsing vertically if the first column is empty */
content: '';
display: inline-block;
}
td:nth-child(2) > span {
position: absolute;
left: 0;
right: 0;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="account-products-container">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Product</th>
</tr>
</thead>
<tbody>
<tr>
<td>123456789</td>
<td><span>This is the name of a product that is long</span></td>
</tr>
<tr>
<td>549490309</td>
<td><span>This is a product title that is even longer than the first one and longer than the second one because the second one is short, so of course it's longer.</span></td>
</tr>
<tr>
<td>005948333</td>
<td><span>This one is short</span></td>
</tr>
</tbody>
</table>
</div>

关于html - 如何使表格列的宽度仅占用必要的空间并带有省略号溢出?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37684708/

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