Как сделать так, чтобы ширина столбца таблицы занимала только необходимое пространство с переполнением эллипса?
Я бы хотел, чтобы моя таблица была шириной 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;
.
С Таблицей-Раскладкой: Исправлено;
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>
Это хорошо отвечает и имеет многоточие, но моя колонка больше не занимает минимальное пространство.
Как я могу сделать так, чтобы столбцы занимали только необходимое им пространство, в то время как моя таблица хорошо реагирует?
Если вы хотите поиграть с ним: JSFiddle
1 ответ:
Вы можете
- Используйте
auto
макет для учета содержимого- Установите ширину таблицы на 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>