Auto Width Column & Ellipsis

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

by piiantom

HTML

<table class="main-table">
<thead>
  <tr>
    <th>Default</th>
    <th>Ordre</th>
    <th>Langue</th>
    <th>Profil</th>
    <th>Libellé</th>
    <th>Identifiant</th>
  </tr>
</thead>
<tbody>
      <tr>
        <td><span>V</span></td>
        <td><span>1</span></td>
        <td><span>Français</span></td>
        <td><span></span></td>
        <td class="main"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Minus ipsam facilis! Velit sapiente numquam.</span></td>
        <td class="ellipsis"><span>RRNPPCXDD</span></td>
    </tr>
      <tr>
        <td><span></span></td>
        <td><span>2</span></td>
        <td><span>Français</span></td>
        <td><span></span></td>
        <td class="main"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit.</span></td>
        <td class="ellipsis"><span>RRNPPCXDD</span></td>
    </tr>
          <tr>
        <td><span></span></td>
        <td><span>3</span></td>
        <td><span>Français</span></td>
        <td><span></span></td>
        <td class="main"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo.</span></td>
        <td class="ellipsis"><span>RRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDDRRNPPCXDD</span></td>
    </tr>
          <tr>
        <td><span></span></td>
        <td><span>4</span></td>
        <td><span>Français</span></td>
        <td><span></span></td>
        <td class="main"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus doloremque magni illo reprehenderit consequuntur quia dicta labore veniam distinctio quod iure vitae porro nesciunt. Mins ipsam facilis! Velit sapiente numquam. Delectus doloremque magni illo reprehenderit...

CSS

.main-table {
    width: 100%;
    table-layout: fixed;
    -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, th{
  text-align: left;
  padding-left: 24px;
  padding-right: 24px;
  height: 32px;
  border-left: 1px solid #e0e0e0;
}
.main-table td {
   width: 1px;
   max-width: 1px;
}
.main-table td.main {
  width: 100%;
}
.main-table td.ellipsis {
  width: 20%;
}
.main-table td.ellipsis span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}





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