Partage
  • Partager sur Facebook
  • Partager sur Twitter

Overlay d'une div au-dessus des td d'une table

(qu'elle prennent toute la dimension de sa td)

Sujet résolu
    18 mars 2019 à 16:52:47

    Bonjour,

    Problème simple mais je n'y arrive pas.

    J'ai un tableau avec des td. Elles ont toutes la même hauteur mais pas forcément la même largeur et le tableau est responsive.

    J'aimerais qu'au-dessus de chaque td  (ou à l'intérieur mais placé au-dessus du texte de contenu) soit superposée une div qui prenne toute la dimension de la td.
    Le souci c'est que cette td a une largeur variable et donc non définie dans le css

    Je n'y arrive pas en CSS (en jQuery si mais ça bouffe en ressources).
    Si je mets position relative sur la div dans la td, elle ne se superpose pas au texte.
    Et si je mets position absolute, elle se superpose au texte mais ne veut pas occuper tout l'espace de la td.

    Comment pourrais-je y arriver?

    Merci.

    Voici le HTML:

    <table>
      <thead>
        <tr>
          <th></th>
          <th>Col1</th>
          <th>Col2</th>
          <th>Col3</th>
          <th>Col4</th>
        </tr>
      </thead>
       <tbody>
       <tr>
          <td>Row1</td>
          <td>
              Data1
              <div class="overlay"></div>
          </td>
          <td>
              Data2
              <div class="overlay"></div>
          </td>
          <td>
              Data3
              <div class="overlay"></div>
          </td>
          <td>
              Data4
              <div class="overlay"></div>
          </td>
        </tr>
       <tr>
          <td>Row2</td>
          <td>
              Data1
              <div class="overlay"></div>
          </td>
          <td>
              Data2
              <div class="overlay"></div>
          </td>
          <td>
              Data3
              <div class="overlay"></div>
          </td>
          <td>
              Data4
              <div class="overlay"></div>
          </td>
        </tr>
      </tbody>
    </table>


    Voici le css de mes td

    html,body{
        pointer-events: auto;
        width:100%;
        height:100%;
        margin:0px;
        padding:0px;
        background:#212933;
        color:#e5ebea;
        font-family:'lato';
        font-weight:400;
        font-size:11px;
        user-select:none;
        text-align:center;
    }
    
    table{
       display:table;
        white-space:nowrap;
        border-collapse:collapse;
        table-layout:fixed; 
        user-select:none;
        width:100%;
    }
    
    tr{
        display:table-row;
    }
    
    th {
        display:table-cell;
        text-overflow:ellipsis;
        vertical-align:middle;
        padding-right:19px;
        padding-left:10px;
        background:#2e3844;
        border:1px solid #56647c;
        overflow:hidden;
        height:40px;
    }
    
    th:first-child{
        background:#212933;
    }
    
    td {
        display:table-cell;
        vertical-align:middle;
        padding:6px;
        border:1px solid #56647c;
        overflow:hidden;
        height:40px;
    }
    td:first-child{
        background:#28303a;
    }
    
    .overlay{
      background:red;
      height:40px;
      position:absolute;
      opacity:0.5;
      width:100px;
    }

    Si besoin de plus d'info, n'hésitez pas.



    • Partager sur Facebook
    • Partager sur Twitter
      18 mars 2019 à 17:08:51

      Salut je ne sais pas si c'est vraiment ce que tu voulais :

      .overlay{
        background:red;
        height:52px;
        position:absolute;
        opacity:0.5;
        width:calc((100% / 5) - 1px );
        margin:-32px 0 0 -6px;
      }

      Mais si tu as la solution à ton problème mes ton problème en résolu !!

      Si tu as des questions n'hésite pas...

      • Partager sur Facebook
      • Partager sur Twitter
        18 mars 2019 à 17:24:37

        Merci pour ta réponse.
        Non, j'aurais en effet dû le préciser, mes tables sont dynamiques. Le nombre de colonnes n'est pas connu et peut changer en temps réel dans la page (l'utilisateur peut modifier le nombre de colonnes à la volée).
        • Partager sur Facebook
        • Partager sur Twitter

        Overlay d'une div au-dessus des td d'une table

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur
        • Markdown