如何使列与其内容一样宽，同时用省略号截断其他列？

Question

我有下表：

.myContainer {
  background-color: yellow;
  width: 200px;
}

.myTable {

}

.columnA {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.columnB {

}

.columnC {

}

<div class="myContainer">
  <table class="myTable">
    <th>
      <tr>
        <th>Name</th>
        <th>Height</th>
        <th>Weight</th>
      </tr>
    </th>
    <tr>
      <td class="columnA">Jack Jackman</td>
      <td class="columnB">170.000</td>
      <td class="columnC">70.000</td>
    </tr>
    <tr>
      <td class="columnA">Smith Smithman</td>
      <td class="columnB">180.000</td>
      <td class="columnC">80.000</td>
    </tr>
  </table>
</div>

我需要摆脱固定的max-width: 80px; 为.columnA 而不会失去省略号效果。这样：

• 除外部 Div 外，没有固定宽度。
• 表格与外部 Div 一样宽。
• B 列和 C 列与其内容一样宽（无换行/溢出）
• 在使用“...”处理文本溢出时，A 列占用剩余宽度

Here is the fiddle link

Answer 1

这是一种方法，您可以在 columnA 中添加一个额外的 div，并将 columnB/columnC 设置为较小的宽度。

额外的 div 也需要有position: absolute，否则会将所有内容推到右侧。

.myContainer {
  background-color: yellow;
  max-width: 200px;
}
.myTable {
  width: 100%;
}
.columnA {
  position: relative;
}
.columnA div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.columnB {
  width: 10%;
}
.columnC {
  width: 10%;
}

<div class="myContainer">
  <table class="myTable">
    <tr>
      <th>Name</th>
      <th>Height</th>
      <th>Weight</th>
    </tr>
    <tr>
      <td class="columnA"><div>Jack Jackman</div></td>
      <td class="columnB">170.00</td>
      <td class="columnC">70.000</td>
    </tr>
    <tr>
      <td class="columnA"><div>Smith Smithman</div></td>
      <td class="columnB">180.00000</td>
      <td class="columnC">80.000</td>
    </tr>
  </table>
</div>