省略号在表格单元格

Question

我有一个表格，其中省略号应该应用于第一个单元格（第一个单元格应该填充剩余空间），而是表格转到父div之外。我怎样才能使它发挥作用？

.wrapper {
  width:200px;
  background: wheat;
}

.el-cell {
  width:99%;
  display: block;
}
.table {
  width: 100%;
}

.no-wrap {
  white-space: nowrap;
}

.el {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="wrapper">
  <table class="table">
    <tr>
      <td class="el-cell">
        <div class="el">
          <span>first cell should ellipsis aaaaaaa bbbb ccccccc</span>
        </div>
      </td>
      <td>
        <span class="no-wrap">2nd cell</span>
      </td>
    </tr>
  </table>
</div>

Answer 1

将position: relative添加到.el-cell和position: absolute添加到span，其中包含top: 0和left: 0

.wrapper {
  width:200px;
  background: wheat;
}

.el-cell {
  width:99%;
  position: relative;
}

.el span{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="wrapper">
  <table class="table">
    <tr>
      <td class="el-cell">
        <div class="el">
          <span>first cell should ellipsis aaaaaaa bbbb ccccccc</span>
        </div>
      </td>
      <td>
        <span class="no-wrap">2nd cell</span>
      </td>
    </tr>
  </table>
</div>

Answer 2

只需添加table-layout: fixed。