省略号在表格单元格中不起作用答案

【问题标题】：Ellipsis doesn't work in table cell省略号在表格单元格中不起作用
【发布时间】：2017-05-06 16:41:24
【问题描述】：

我有一个表格，省略号应该应用于第一个单元格（第一个单元格应该填充剩余空间），但是表格超出了父 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>

【问题讨论】：

标签： html css ellipsis

【解决方案1】：

将position: relative 添加到.el-cell 和position: absolute 到具有top: 0 和left: 0 属性的span

.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>

【讨论】：

【解决方案2】：

只需添加table-layout: fixed。

【讨论】：

table-layout: fixed 打破了 99% 的宽度 - 单元格填满了表格的一半。
为什么不给另一个单元格设置 1% 的宽度？每个单元格内真的需要这么多元素吗？最终目标是什么？请记住，200 像素的 1% 太小（2 像素）。
因为99% 使第一个单元格填满了整个可用空间 - 所以第二个单元格不是 1% - 它具有其子单元格的宽度。