如何使 table 列的宽度只需要必要的 space 并带有省略号溢出?
How to make table column's width only take necessary space with ellipsis overflow?
我希望我的 table 宽度为 100%,并且 table 的每一列只占用它需要的 space。如果溢出,则会出现省略号。
无Table-布局:固定;
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;
,table 会溢出而不是由于 white-space: nowrap;
.
调整大小
使用 Table-布局:固定;
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>
这反应很好,有省略号,但我的专栏不再占用最小的space。
如何让专栏只占用他们需要的 space,同时让我的 table 响应良好?
如果你想玩它:JSFiddle
你可以
- 使用
auto
布局以考虑内容
- 将 table 的宽度设置为 100%。它将被视为最小宽度。
- 将第二列的宽度设置为 100%。然后它将增长并占用所有可用的 space,如果有的话。
- 为防止第二列因内容而增长更多,请将它们包装在绝对定位的容器中。
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>
我希望我的 table 宽度为 100%,并且 table 的每一列只占用它需要的 space。如果溢出,则会出现省略号。
无Table-布局:固定;
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;
,table 会溢出而不是由于 white-space: nowrap;
.
使用 Table-布局:固定;
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>
这反应很好,有省略号,但我的专栏不再占用最小的space。
如何让专栏只占用他们需要的 space,同时让我的 table 响应良好?
如果你想玩它:JSFiddle
你可以
- 使用
auto
布局以考虑内容 - 将 table 的宽度设置为 100%。它将被视为最小宽度。
- 将第二列的宽度设置为 100%。然后它将增长并占用所有可用的 space,如果有的话。
- 为防止第二列因内容而增长更多,请将它们包装在绝对定位的容器中。
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>