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

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＆amp; 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>