Ellipsis doesn't work in table cell

Question

I have table where ellipsis should be applied to first cell (first cell should fill the remaining space) but instead table goes outside parent div. How can I make it work?

.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

Add position: relative to .el-cell and position: absolute to the span with attributes top: 0 and 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

Just add table-layout: fixed.