表頭中的隱藏內容，懸停時顯示

我有一個表頭中有很多信息，並且有很多列。我需要表寬度以適合合理的筆記本電腦寬度，如1280.表頭中的隱藏內容，懸停時顯示

我最初的想法是垂直對齊列內容，但由於多種原因，這不是一個選項。

所以，現在的想法是，以顯示標頭中的內容只是一部分，沿着overflow:hidden線的東西，並顯示懸停全部內容，但不改變列的寬度。

此示例圖片顯示欄目內容現在的樣子 - 以及我需要它的樣子。這些列需要縮小到50px，隱藏不適合的文本，並在懸停時顯示文本的其餘部分，但不擴展列寬。

這是我走到這一步：

https://jsfiddle.net/2em3c44q/

這裏，列懸停擴大。如何擴展標題而不展開整個列？

來源

2017-06-14 kurtgn

_「我怎麼只擴大不頭擴大整列？「 - - 你不這樣做，因爲那不是桌子的工作方式。您可以絕對定位這些額外的內容，以便將其排除在正常流程之外。（可用性可能會保持不佳，如果這是理解列數據意味着什麼的重要信息，那麼它應該始終可見）。 – CBroe

可能的重複[如何在表格中包裝大文本並顯示它在鼠標懸停作爲彈出？]（https://stackoverflow.com/questions/44499666/how-to-wrap-large-text-in-a-table-and-display-it-on-mouse-hover-作爲一種酥料餅） – Chiller

懸停位置的內部DIV絕對，它不會改變表列的尺寸：

table { 
 
    width: 100%; 
 
} 
 

 
th, 
 
td { 
 
    border-right: 1px solid grey; 
 
} 
 

 
.narrow { 
 
    position: relative; /* the context by which to position the inner div */ 
 
    width: 50px; 
 
} 
 

 
.narrow div { 
 
    width: 50px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    pointer-events: none; /* optional - enables hovering on other headers, when the current one is expanded */ 
 
} 
 

 
.narrow:hover div { /* the hover is on narrow */ 
 
    position: absolute; 
 
    top: 5px; 
 
    left: -75px; 
 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
 
    width: 200px; 
 
    background: white; 
 
    z-index: 1; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th class="wide"> 
 
     wide column 
 
     </th> 
 
     <th class="narrow"> 
 
     <div> 
 
      column 1<br/> some info 
 
     </div> 
 

 
     </th> 
 
     <th class="narrow"> 
 
     <div> 
 
      column 1<br/> some info 
 
     </div> 
 
     </th> 
 
     <th class="narrow"> 
 
     <div> 
 
      column 1<br/> some info 
 
     </div> 
 
     </th> 
 
     <th class="narrow"> 
 
     <div> 
 
      column 1<br/> some info 
 
     </div> 
 
     </th> 
 
     <th class="narrow"> 
 
     <div> 
 
      column 1<br/> some info 
 
     </div> 
 
     </th> 
 
     <th class="narrow"> 
 
     <div> 
 
      column 1<br/> some info 
 
     </div> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td></td> 
 
     <td> 
 
     1 
 
     </td> 
 
     <td> 
 
     1 
 
     </td> 
 
     <td> 
 
     1 
 
     </td> 
 
     <td> 
 
     1 
 
     </td> 
 
     <td> 
 
     1 
 
     </td> 
 
     <td> 
 
     1 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 

 
</table>

來源

2017-06-14 08:07:38

表頭中的隱藏內容，懸停時顯示

回答

相關問題