[Résolu] Overlay d'une div au-dessus des td d'une table - (qu'elle prennent toute la dimension de sa td) par Baylock - page 1

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.

Baylock

18 mars 2019 à 16:52:47

noopy360

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

https://validator.w3.org/ / https://jigsaw.w3.org/css-validator/ / https://codepen.io/pen

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).

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

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

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

Supprimer

Modérer

Signaler le message aux modérateurs