Auto Width Column & Ellipsis

How to make a table with auto width but adding ellipsis and so column distribution

HTML

<table class="main-table">
    <tr>
        <td class="auto">User Custom</td>
        <td styl="width:80%;">
          <span class="table">
            <span class="row">
              <span class="cell">Loremipsumdolorsitamet,consecteturadipisicing elit.Delectusdoloremquemagniillo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</span>
            </span>
          </span>
        </td>
        <td styl="width:20%;">
            <span class="table">
              <span class="row">
                <span class="cell">Archive File</span>
            </span>
          </span>
        </td>
    </tr>
     <tr>
        <td class="auto">Delivered</td>
        <td styl="width:80%;">
          <span class="table">
            <span class="row">
              <span class="cell">Lorem ipsum dolor sit amet.</span>
            </span>
          </span>
        </td>
        <td styl="width:20%;">
            <span class="table">
              <span class="row">
                <span class="cell">Archive Folder</span>
            </span>
          </span>
        </td>
    </tr>
</table>

CSS

.main-table {
    width: 100%;
    -webkit-box-shadow: 0px 2px 6px 2px rgba(149, 142, 165, 0.1);
    -moz-box-shadow: 0px 2px 6px 2px rgba(149, 142, 165, 0.1);
    box-shadow: 0px 2px 6px 2px rgba(149, 142, 165, 0.1);
    background-color: #fff;
    font-family: Arial;
    border-collapse: collapse;
}
.main-table tr{
   border-bottom: 1px solid #e0e0e0;
   color: rgba(0, 0, 0, 0.870588);
   height: 32px;
   line-height: 32px;
}
.main-table td{
  padding-left: 24px;
  padding-right: 24px;
  height: 32px;
  border-left: 1px solid #e0e0e0;
}
.main-table span.row {
  display: table-row;
}
.main-table span.cell {
  display: table-cell;
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-table span.table {
  display: table;
  width: 100%;
  table-layout: fixed;
  
  /*not really necessary, removes extra white space */
  border-collapse: collapse;
  border-spacing: 0;
    
   
}
.auto {
    /* used to keep buttons' text in a single line,
     * remove this class to allow natural line-breaking.
     */
    white-space: nowrap;
}