28172 sujets

CSS et mise en forme, CSS3

[Résolu] Faire un trait sur un tableau via CSS

Bonjour,

J'ai fais un tableau avec l'occupation des salles de réunion à mon travail avec, en colonnes les salles de réunion et par tranche de 1h par ligne.

Cette page s'affiche regulièrement pendant 30 secondes sur un écran d'information.

je souhaiterai ajouter une ligne pour figurer l'heure actuelle.

Je ne sais meme pas par où commencer.

Pourriez vous m'aider ?

Merci
F.
Salut,

Tu utilises quoi comme logiciel pour faire l'affichage sur des écrans d'informations ? Avec Xibo par exemple, tu peux fournir l'adresse d'un ical et ça se fait tout seul comme il faut. (Je trouve bizarre que cela ne soit pas pré existant.)

En très gros, je suppose que tu dois avoir une "colonne" qui représente la journée, il faudra y rajouter un élément (genre un div) en position absolute et tu vas modifier le top en fonction de l'heure (exmeple 0% à 8h, 50% à midi et 100% à 20h)

Pour faire un truc plus détaillé, il va nous falloir ton code pour voir ce qu'on peut faire dans ton cas précis.
Modifié par Mathieuu (21 May 2024 - 13:41)
upload/1716292540-86608-sanstitre.png En faite, c'est un simple tableau html généré en php.

Ce que je veux, c'est par exemple qu'a 8h30, il y ai un trait de couleur à la moitié de la ligne "8h et 9h" et que ca avance au fil de la journée.

Désolée, j'aurai dû commencer par cela. Smiley sweatdrop
Modifié par Florence75 (21 May 2024 - 13:55)
Hum mouais c'est mieux ça illustre un peu plus mais c'est toujours pas du code mais juste une image Smiley sweatdrop

Hop petit bout de code pour voir ce qu'il est possible de faire : https://jsfiddle.net/2k4879bn/
Explications :
- J'ai rajouté un tr vide dans la table (qui sert à afficher le trait) et je lui ai collé une class "now"
- Dans le css je l'ai mis en position absolute pour avoir juste à faire bouger le top en fonction de la hauteur voulue.
- Dans le css j'ai aussi rajouté un position:relative pour la table, sinon le tr déconne est float sur toute la page
- Dans le javascript : je calcule la hauteur du top en fonction de l'heure actuelle. Pour pas me faire trop chier avec les calculs j'ai mis 10 créneaux horaire dans ma table comme ça chaque heure représente 10% Smiley lol
- (heure - 8) *10 pour les heures entières déjà passé (j'ai mis que ça commence à 8h le matin , sinon faut changé le 8)
- pour que les 60 minutes fluctuent pour l'équivalent de 10% de l'heure en cours je divise les minutes par 6 et ça roule je retombe sur un intervalle 0-10

Après si tu fais tout dans le code php, je suppose que tu dois pouvoir faire le calcul du top directement en php et l'afficher directement à la bonne position.
Meilleure solution
Merci Mathieuu.
Par contre, le tr est float sur la page donc si je mets 0%, la ligne est en bas.

J'ai plus ou moins réussi à compenser le soucis, je ne comprends pas pourquoi cela faire cela.

Le code du tableau : https://jsfiddle.net/florence_9876/5ckLj71d/

Si je mets 0%, ca met la ligne tout en haut de la page.


Le tableau : 

<table class="bfmini-table striped" width="100%" cellspacing="0" cellpadding="5" border="1" align="center"><tbody><tr><td></td><td align="td_width center"><b>A</b></td><td align="td_width center"><b>B</b></td><td align="td_width center"><b></b></td><td align="td_width center"><b>C</b></td><td align="td_width center"><b>D</b></td><td align="td_width center"><b>E</b></td><td align="td_width center"><b>F</b></td><td align="td_width center"><b>G</b></td><td align="td_width center"><b>H</b></td><td align="td_width center"><b>I</b></td><td align="td_width center"><b>J</b></td><td align="td_width center"><b>K</b></td><td align="td_width center"><b>L</b></td></tr><tr class="now" style="top: 0%;"> </tr><tr><td class="td_width">08h<br>-<br>09h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td></tr><tr><td class="td_width">09h<br>-<br>10h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td></tr><tr><td class="td_width">10h<br>-<br>11h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td></tr><tr><td class="td_width">11h<br>-<br>12h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td></tr><tr><td class="td_width">12h<br>-<br>13h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td></tr><tr><td class="td_width">13h<br>-<br>14h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td></tr><tr><td class="td_width">14h<br>-<br>15h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td></tr><tr><td class="td_width">15h<br>-<br>16h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td></tr><tr><td class="td_width">16h<br>-<br>17h</td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td><td class="libre" align="center"></td></tr></tbody></table>
\ô/
dans le même ordre d'idée que Mathieuu j'utiliserais un pseudo-élement ::after et une variable CSS --hour, par exemple.
table {
  --hour: 0;
  position: relative;
}
table:after {
  content: "";
  position: absolute;
  top: var(--hour);
  right: 0;
  left: 0;
  height: 1.5em;     /* à ajuster */
  background-color: #F008;
}

il suffit de réajuster --hour fonction de l'heure/décalage horaire
const table = document.querySelector("table");
const decalHeure = /* calcul à définir suivant le cas */
table.style.setProperty("--hour", decalHeure + "%");
Salut,

Si la ligne est en haut de la page et pas juste en haut du tableau c'est que tu n'as pas mis le position: relative sur ta table.

Et je n'avais pas pensé à la ligne d'entête, il faudra donc rajouter la hauteur de cette ligne au pourcentage (la en rajoutant 4.5 ça semble vaguement bon) , et la il n'y a que 9 heure ça complique un poil le calcul ... Du coup j'ai adapté le javascript pour calculer la hauteur avec une entête : https://jsfiddle.net/1Lpje0ac/ Smiley lol
Hum je ne suis pas sur de comprendre ta question Smiley sondage

Si tu parle de la ligne d’entête, oui en théorie ça devrait plutôt être des th que des tr (mais je ne sais pas vraiment comment son tableau est généré donc peut être pas évident à faire).
Si c'est faisaible de remplacer par des th, on pourrait également les encapsuler dans un thead pour les distinguer du tbody et ensuite cela permettrait de faire basculer le position:relative de table à tbody et ne plus avoir besoin de mesurer la taille de l’entête dans le calcul (0 au lieu de 4.5 dans l'exemple).

Nouvelle version pour illustrer : https://jsfiddle.net/cw0xknob/
Bonjour tout le monde.

En effet, il manquait le 

position: relative


dans la balise du table.

Ca marche nickel.

Le calcul du % correspondant à l'entete etait facile à faire et plus simple.

Encore merci du coup de main.

F.
Modifié par Florence75 (23 May 2024 - 08:47)
Prévenir un modérateur
Répondre au sujet
Aller à