用省略号隐藏列溢出，缩小其他列以适应内容，不设置任何表格/列宽，并扩展表格以适应 div

Question

这是我的代码：

<style type="text/css">
div {
  width: 250px;
}

table {
  white-space: nowrap;
}

th {
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
}
th:hover {
  overflow: visible;
  position: relative;
}
th:hover span {
  background-color: white;
}
td {
  width: 100%;
}
</style>

<div>
  <table border="1">
    <tr>
      <th><span>Short Header</span></th>
      <td>value</td>
    </tr>
    <tr>
      <th><span>Quite Long Header</span></th>
      <td>value</td>
    </tr>
    <tr>
      <th><span>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</span></th>
      <td>value</td>
    </tr>
  </table>
</div>

这里有一个关于 JSFiddle 的例子：https://jsfiddle.net/3ptc3fL5/

请注意表格最后一行中的第一列是如何因太宽而无法容纳的，因此它会以省略号溢出。但是，如果您将鼠标悬停在它上面，它会展开以显示整个值。

但是，如果我摆脱 th 的 max-width 风格，一切都会崩溃。该表不再适合父 div。这是一个问题，因为我想在不必预先指定宽度的情况下达到同样的效果。

我的原因是我想创建一个通用实用程序类，我可以在不同响应页面的不同表格中使用。在一般情况下，我不知道父 div 的宽度（尤其是在响应式页面上），我不知道表格中其他列的宽度，我不想通过和在每种情况下手动计算出来，并在每次更改时保持最新。

我只希望除第一个列之外的所有列尽可能缩小而不会溢出，并且第一个列尽可能地扩展同时将表保持在父 div 内同时隐藏其内容的任何溢出都以省略号结尾。

我知道这里有大约 5000 个类似的问题，但在这一点上，我想我已经浏览了所有这些问题，但仍然没有找到任何可行的方法。 This is pretty close，但不考虑包装 div 的大小。有什么想法吗？

Answer 1

我想这就是你要找的。检查sn-p。

编辑：在第一列添加一个绝对定位的 div 并使用 text-overflow: ellipsis; 并将其他列的宽度固定为 1px 或 1% 并使其成为 white-space: nowrap;

div {
  width: 400px;
}

table {
  width: 100%;
}

td, th {
  position: relative;
}

tr td:not(:first-child), tr th:not(:first-child){
    width:1%;
    white-space:nowrap;
}

.first-row{
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div>
  <table border="1">
    <tr>
      <th><div class="first-row">Header Loooooooooooooooooooooooooooooooooooooooooon</div></th>
      <th>First Value</th>
      <th>Value</th>
      <th>Value</th>
    </tr>
    <tr>
    <td><div class="first-row"> Loooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog text</div></td>
      <td>Value two</td>
      <td>Value</td>
      <td>Value</td>
    </tr>
    <tr>
    <td><div class="first-row">Second Loooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog text</div></td>
      <td>Value</td>
      <td>Value</td>
      <td>Value</td>
    </tr>
    <tr>
    <td><div class="first-row">Third Loooooooooooooooooooooooooooooooooonooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog text</div></td>
      <td>Value</td>
      <td>Value</td>
      <td>Value</td>
    </tr>
  </table>
</div>

希望这会有所帮助。

Answer 2

text-overflowapplies to block containers，所以它不能在表格单元容器上正常工作。您应该将文本包装在一个带有如下类的块容器中：

.ellip_wrap {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

已编辑：

我重构并删除了以下css：

.ellip_wrap:hover {
  overflow: visible;
  position: relative;
}
.ellip_wrap:hover span {
  background-color: white;
}

.table_wrap {
  width: 250px;
}
.table_item {
  table-layout: fixed;
  box-sizing: border-box;
  width: 100%;
}

.ellip_wrap {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="table_wrap">
  <table class="table_item" border="1">
    <tr>
      <th><div class="ellip_wrap">Short Header</div></th>
      <td>value</td>
    </tr>
    <tr>
      <th><div class="ellip_wrap">Quite Long Header</div></th>
      <td>value</td>
    </tr>
    <tr>
      <th><div class="ellip_wrap">MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</div></th>
      <td>value</td>
    </tr>
  </table>
</div>

Answer 3

你可以这样做：

div {
  width: 250px;
  border:1px solid green;
}

table {
  white-space: nowrap;
  table-layout: fixed;/* added this*/
  width: 100%;/* added this*/
}

th {
  overflow: hidden;
  text-overflow: ellipsis;
}

<div>
  <table border="1">
    <tr>
      <th>Short Header</th>
      <td>value</td>
    </tr>
    <tr>
      <th>Quite Long Header</th>
      <td>value</td>
    </tr>
    <tr>
      <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
      <td>value</td>
    </tr>
  </table>
</div>
<div style="width:300px">
  <table border="1">
    <tr>
      <th>Short Header</th>
      <td>value</td>
    </tr>
    <tr>
      <th>Quite Long Header</th>
      <td>value</td>
    </tr>
    <tr>
      <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
      <td>value</td>
    </tr>
  </table>
</div>

<div style="width:300px">
  <table border="1">
    <tr>
      <th>Short Header</th>
      <td>value</td>
      <td>value</td>
    </tr>
    <tr>
      <th>Quite Long Header</th>
      <td>value</td>
      <td>value</td>
    </tr>
    <tr>
      <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
      <td>value</td>
      <td>value</td>
    </tr>
  </table>
</div>
<div style="width:240px">
  <table border="1">
    <tr>
      <th>Short Header</th>
      <td>value</td>
      <td>value</td>
      <td>value</td>
      <td>value</td>
    </tr>
    <tr>
      <th>Quite Long Header</th>
      <td>value</td>
      <td>value</td>
      <td>value</td>
      <td>value</td>
    </tr>
    <tr>
      <th>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveHeader</th>
      <td>value</td>
      <td>value</td>
      <td>value</td>
      <td>value</td>
    </tr>
  </table>
</div>