表格标题中隐藏的内容，悬停时显示答案

【问题标题】：hidden content in table header, display on hover表格标题中隐藏的内容，悬停时显示
【发布时间】：2017-06-14 16:07:38
【问题描述】：

我有一个表，表头列有很多信息，而且列很多。我需要表格宽度适合笔记本电脑的合理宽度，例如 1280。

我最初的想法是垂直对齐列内容，但出于多种原因，这不是一个选项。

所以现在的想法是在标题中仅显示部分内容，类似于overflow:hidden 的内容，并在悬停时显示全部内容，但不改变列的宽度 .

此示例图片显示了列内容现在的样子 - 以及我需要它的样子。列需要缩小到 50 像素，隐藏不适合的文本，并在悬停时显示其余文本，但不扩大列宽。

这是我目前得到的：

https://jsfiddle.net/2em3c44q/

在这里，该列在悬停时展开。如何只展开标题而不展开整列？

【问题讨论】：

“我如何只扩展标题而不扩展整个列？” - 你不需要，因为表格不是这样工作的。您可以绝对定位该额外内容，使其脱离正常流程。（但可用性可能会一直很差。如果这是理解列数据含义所需的基本信息，那么它应该始终可见。）
How to wrap large text in a table and display it on mouse hover as a popover?的可能重复

标签： css

【解决方案1】：

绝对悬停内部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>

【讨论】：