Customisation tableau

Pour le moment, le code HTML est comme ceci, mais il est possible de le modifier au besoin :

<table class="table" id="global_features_wrapper"><tbody><tr class="features_wrap" id="feature_8"><td>Type d'aliment</td><td><ul><li id="value_452">Complément alimentaire</li></ul></td></tr><tr class="features_wrap" id="feature_1"><td>Type</td><td><ul><li id="value_3">Foin</li></ul></td></tr><tr class="features_wrap" id="feature_2"><td>Poids (kg)</td><td><ul><li id="value_468">1</li></ul></td></tr><tr class="features_wrap" id="feature_10"><td>Gamme</td><td><ul><li id="value_489">Nature</li></ul></td></tr><tr class="features_wrap" id="feature_6"><td>Espèce</td><td><ul><li id="value_445">Chinchilla</li><li id="value_440">Cobaye</li><li id="value_438">Lapin</li><li id="value_446">Octodon</li><li id="value_439">Cochon d'inde</li></ul></td></tr><tr class="features_wrap" id="feature_3"><td>Conditionnement</td><td><ul><li id="value_5">Sachet</li></ul></td></tr><tr class="features_wrap" id="feature_7"><td>Âges</td><td><ul><li id="value_447">Tous les âges</li></ul></td></tr></tbody></table>

Bonjour,

Une possibilité (j'ai vu que sur ton image initiale, la barre verte foncée du milieu devenait plus fine aux extrémités. Je l'ai faite droite. Si nécessaire on peut aussi réaliser ces affinements mais c'est un peu plus compliqué) :

#global_features_wrapper
{
	border-collapse:collapse;
	background:#f3f3f3;
	border:0.5em solid #f3f3f3;
}
#global_features_wrapper tbody
{
	display:block;
	border:0.5em solid transparent;
	background:#bdd23d;
	border-radius:0.5em;
}
#global_features_wrapper tr:nth-of-type(2n+1) td
{
	background:#fff;
}
#global_features_wrapper td
{
	padding:0.5em;
}
#global_features_wrapper td:nth-of-type(2n+1)
{
	border-radius:0.5em 0 0 0.5em;
	border-right:0.1875em solid #2d5021;
}
#global_features_wrapper td:nth-of-type(2n)
{
	border-radius:0 0.5em 0.5em 0;
	border-left:0.1875em solid #2d5021;
}

EDIT: un exemple en ligne à https://jsfiddle.net/parsimonhi/wqecrsx3/

Amicalement,
Modifié par parsimonhi (23 Nov 2023 - 14:53)

Merci, c'est déjà super
J'ai ceci pour le moment :

Bonjour,

Il doit y avoir autre chose ailleurs dans le css qui provoque cet affichage trop large du rectangle vert, et encore autre chose qui provoque l'affichage de petites lignes autour des td. Il faut regarder les styles des tables (ou éventuellement de leurs conteneurs), ainsi que ceux des tr et td dans le css.

Amicalement,

Bonsoir. Pour le tableau en lui-même et ses éléments enfants, et afin de ne pas remettre en cause vos styles déjà définis ailleurs, vous pouvez tester cette règle de reset CSS en préambule du code de Parsimonhi :

#global_features_wrapper,
#global_features_wrapper * {
  all: unset;
}