table row et table cell avec groupement de cellules
Bonjour,
Pas facile de faire un titre qui correspond à mon problème.
J'avais une table avec 3 colonnes et un lien pour la ligne (table créée dynamiquement à partir d'une base de données)
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div id="liste">
<div class="ligne" onclick="faitletravail(1)">
<span></span>
<span></span>
<span></span>
</div>
<div class="ligne" onclick="faitletravail(2)">
<span></span>
<span></span>
<span></span>
</div>
etc...
</div> |
dans le CSS, j'avais
Code:
1
2
3
| #liste div { display:table-row;}
#liste div span { display:table-cell;} |
J'avais une table bien organisée
Mais j'ai eu la bonne idée de vouloir ajouter une croix pour avoir la possibilité d'effacer la proposition de travail à faire et là, plus de mise en page possible
Soit je mets la croix dans la ligne intégrée à un <span>, mais le onclick correspondant ne fonctionne pas, c'est le onclick de la ligne qui prend le dessus alors j'ai changé la structure de ma ligne, mais j'ai alors perdu la mise en colonne.
structure de la page actuellement modifiée, mais je n'arrive pas à m'en sortir avec le CSS nécessaire pour avoir mes croix sur la même ligne que le texte correspondant et mes cases alignées dans 3 colonnes bien visibles.
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <div id="listcertifaimprimer">
<div>
<img src="http://standard.ressorts.org/images/publish_x.png" onclick="effacecertlist(125)" width="12" height="12" title="Effacer la demande de ce certificat">
<span onclick="" class="txtlistebl">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div>
<img src="http://standard.ressorts.org/images/publish_x.png" onclick="effacecertlist(49)" width="12" height="12" title="Effacer la demande de ce certificat">
<span onclick="" class="txtlistebl">
<span></span>
<span></span>
<span></span>
</span>
</div>
</div> |
actuellement, mon CSS correspondant :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| #listcertifaimprimer div span {
position: relative;
display:table-row;
}
#listcertifaimprimer div span:hover {
position: relative;
display:table-row;
background-color: black;
color: white;
}
#listcertifaimprimer div span span {
position: relative;
padding-right: 5px;
padding-left: 5px;
width: auto;
text-overflow: ellipsis;
text-align: left;
display:table-cell;
} |
S'il n'y a pas de solution avec le CSS, il va falloir que je récupère la position à laquelle se trouve ma première cellule que j'aurais eu le soin de décaler vers la droite pour aller y poser un div juste devant afin que ça corresponde à la bonne ligne quelque soit le navigateur (il y a toujours des différences d'affichages) et surtout, faire ça, c'est un peu une usine à gaz. Mais si j'ai pas le choix...
Merci à ceux qui vont me donner un coup de pouce sur ce problème là. (je continue de chercher de mon coté comme à chaque fois que je pose une question)
C'est visible là : http://gestion1.ressorts.org (il y a un accès de test indiqué sur la page d'accueil) puis menu BL/Factures, puis Certificats et enfin n'importe quelle liste de certificats (conformité, matière ou contrôle) puisqu'il s'agit de la même création de liste, mais avec des actions différentes ou pas d'action(pas encore programmées)
NOTA: même s'il s'agit d'un programme à allure pro, c'est surtout un développement amateur pour mon usage propre parce que je n'ai pas trouvé mon bonheur dans les programmes existants à un tarif non prohibitif.
