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 class="auto">Ordre</th>
    <th class="auto">Langue</th>
    <th>Profil</th>
    <th>Libellé</th>
    <th class="auto">Identifiant</th>
  </tr>
</thead>
<tbody>
      <tr>
        <td>V</td>
        <td>1</td>
        <td class="auto"><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></td>
        <td>2</td>
        <td class="auto"><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>3</td>
        <td class="auto"><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></td>
        <td>4</td>
        <td class="auto"><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%;
    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: 12px;
  padding-right: 12px;
  height: 32px;
  border-left: 1px solid #e0e0e0;
  width: 1px;
  max-width: 1px;
  min-width: 1px;
}


/*
    Chaque td contient un span...
    A l'usage, probablement pas nécessaire, sauf pour l'ellipsis
    3 classes avec lequelles jouer, à attacher à l'élément td
    
    Par défaut, la table shrink toutes les colonnes à 1px de large. 
    De fait, la largeur minimale d'une colonne revient à 1 pixel + Les paddings left et right. Le text va alors sortir de la cellule.
    
    Une première classe auto, si ajoutée à toutes les cellules d'une colonnes va permettre de taille la colonne selon le contenu
    Contrainte: Le texte restera sur une seule ligne.
    Visible sur la colonne langue.
    Il est possible de mettre cette classe sur une seule cellule, 
    l'effet sera le même si par exemple on ajoutes cette classe sur la cellule la plus large en terme de contenu (cas de la colonne ordre)
    
    Une deuxième classe ellipsis pour contraindre la largeur et éviter au texte de sortir de la cellule avec l'ajout du ...
    Cette classe implique de rajouter un span dans la cellule par contre.
    
    Enfin, class main pour dire qu'il s'agit de la colonne principale (donc, qui doit prendre le plus de place)
    J'ai fixé la largeur arbitrairement à 60% (arbitraire car va dépendre du nombre totale de colonne).

*/


.main-table td.main {
  /* Un peu arbitraire... A voir comment modulariser le truc */
  width: 60%;
}
.main-table td.ellipsis {
}
.main-table td.ellipsis span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auto {
    width: initial;
    max-width: initial;
    min-width: initial;
    white-space:...