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

latte 发表于 Dev

拿铁

我有下表：

.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列占用剩余宽度，同时使用“ ...”处理文本溢出

这是小提琴链接

一个儿子

这是一种在其中添加额外divcolumnA并将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>