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

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>

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

• 除外部 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>