如何選擇哪個列縮小以適合表寬？

Question

我有一張桌子，各種各樣的列和一個固定的寬度。前提是某些列應始終完全顯示。因此，無論何時表格的寬度超出容器限制，選定的列都會減小寬度，以免其他人受到影響。

從這個例子中，期望的結果將是第一列和最後一列總是顯示他們的內容，而中間一列則縮短以表示它們的內容。

https://jsfiddle.net/quz7jdk8/1/

#content { 
 
    border: 1px solid; 
 
    max-width: 220px; 
 
    overflow: hidden; 
 
} 
 

 
table th, 
 
table td { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
}

<div id="content"> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>qnty</th> 
 
     <th>desc.</th> 
 
     <th>total</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td>0.2222222</td> 
 
     <td>weigth product</td> 
 
     <td>255555.00</td> 
 
     </tr> 
 
     <tr> 
 
     <td>1</td> 
 
     <td>prod</td> 
 
     <td>1.00</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

可選：如果有可能縮短列應該有一個text-overflow: ellipsis;行爲。

附加信息我忘了提及：

• 容器寬度不能在任何情況下進行修改。

• 由於結果將以紙張打印，因此不應顯示卷軸。

• tbody行的內容是動態的。因此，當單元格內容的長度使表大於容器時（如示例中所示），問題就會顯現出來。

Answer 1

我覺得不好張貼這個答案，因爲我仍然不明白爲什麼它的工作原理......我只是想荒謬的東西...對不起那個。

解決這個問題的第一部分是用td替換標頭中的th（th可能有一些未知屬性會混淆所有內容）。然後爲每個標題單元格width:1%;設置一個樣式，除了中間和中間的tbody單元格爲max-width:0;（不要問我爲什麼或者它是如何工作的）。

在更新的例子中，你可以看到我打算做的事： https://jsfiddle.net/quz7jdk8/5/

故取其內容是，第一，最後一列將始終可見，同時減少中間一列的寬度。

事實上，它在Chrome和Firefox上運行穩定。

（obiously如果first_column_length + last_column_length> container_width預期的結果變得IMPOSIBLE）

Answer 2

這個問題不是很清楚，但我想你試圖隱藏在一定的屏幕寬度的中間單元格的寬度？

但這是一個可能的解決方案？

https://codepen.io/stefan24/pen/ZJWYXK

  #content{ 
      border:1px solid; 
      max-width:220px; 
      overflow: hidden; 
     } 
     table th, table td{ 
      white-space:nowrap; 
      text-overflow: ellipsis; 
     } 


     @media (max-width: 1200px) { 
      .mid_row { 
       text-overflow: ellipsis; 
       width: 30px; 
       display: block; 
       white-space: nowrap; 
       overflow: hidden; 
      } 
     } 


<div id="content"> 
<table> 
<thead> 
<tr> 
    <th>qnty</th> 
    <th class="mid_row">desc.</th> 
    <th>total</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td>0.2222222</td> 
    <td class="mid_row">weigth product</td> 
    <td>255555.00</td> 
</tr> 
<tr> 
    <td>1</td> 
    <td class="mid_row">product</td> 
    <td>1.00</td> 
</tr> 
</tbody> 
</table> 
</div>