如何使表格列的宽度仅占用省略号溢出的必要空间？

Posted 2023-03-05

【中文标题】如何使表格列的宽度仅占用省略号溢出的必要空间？

【英文标题】：How to make table column's width only take necessary space with ellipsis overflow?

【发布时间】：2016-10-07 16:06:59

【问题描述】：

我希望我的表格是 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

【问题讨论】：

基本上你想让第一个像第二个一样有省略号吗？

this question 的答案建议使用max-width:0。我在你的小提琴中试过了，它看起来很有效。见：jsfiddle.net/knf913xL

我希望省略号显示它是否太长，是的。但我不想要不同列之间的大空间。我希望每一列都占据它最大的 <td> 的宽度，而不是更多（就像我的第一个示例），同时还让整个表格调整大小而不是溢出（就像我的第二个示例）。

抱歉，实际上这不起作用。列的大小不合适。

【参考方案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>

【讨论】：

在您的代码示例中，该列仍然比其内容宽得多。您的代码 sn-p 看起来就像我的第二个示例。 jsfiddle.net/b38vcwzL

@HunterTurner Chrome 需要width: 100% 在第二列。

不错。不幸的是，这不适用于 3 个单元格，其中第一个单元格应该是最小的，另外两个应该平均分配剩余空间。