html - 用省略号隐藏列溢出，缩小其他列以适合内容，不设置任何表格/列宽度，并扩展表格以适合 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

我想这就是您要找的。检查代码段。

编辑: 在第一列添加一个绝对定位的 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>

希望这会有所帮助。