[Astuce] Un tableau caractéristique au couleurs alternées

[julien51]

Bonjour à tous,

 

Je vous propose une petite astuce pour faire un tableau caractéristique au couleurs alternées comme sur la photo :

 

 

 

Il faut changé ce code qui se trouve dans product.tpl

{if isset($features) && $features}
 <!-- product's features -->
 <ul id="idTab2" class="bullet">
 {foreach from=$features item=feature}
		{if isset($feature.value)}
   <li><span>{$feature.name|escape:'htmlall':'UTF-8'}</span> {$feature.value|escape:'htmlall':'UTF-8'}</li>
		{/if}
 {/foreach}
 </ul>
{/if}

par ce code :

	 {if isset($features) && $features}
	<!-- product's features -->
		<style type=text/css>
		table tbody tr:nth-child(odd) { background-color: #d7d7d7; }
		</style>
		<table id="Sectioncaract">
		<tbody>
		<th rowspan="0">Caractéristiques techniques</th>
	{foreach from=$features item=feature}
		{if isset($feature.value)}

	   	 <tr><td class="ProdSection_name">{$feature.name|escape:'htmlall':'UTF-8'}</td> <td class="ProdSection_value">{$feature.value|escape:'htmlall':'UTF-8'}</td></tr>
		{/if}
	{/foreach}
  </tbody>
</table>

<script>
  $("tr:odd").css("background", "#ededed");
</script>

{/if}

 

et mettre à la fin de votre css dans product.css

#more_info_sheets table {
border: 1px solid #B2B2B2;
}


.ProdSection_name {
color: #333333;
font-size: 12px;
padding: 5px 4px 5px 10px;
width: 182px;
}


.ProdSection_value {
width: 63%;
}

th {
border-right: 1px solid #B2B2B2;
color: #444444;
font-size: 12px;
font-weight: bold;
padding-left: 15px;
text-align: left;
}

 

Supprimé le cache pour que cela fonctionne .

 

En espérant aidé certain

Cordialement,

Julien

Edited February 1, 2013 by julien51 (see edit history)

[jbju]

Merci beaucoup pour cette astuce ! Cela faisait un moment que je cherchais

[Prestapascher]

Cela m'intéresse de voir le fonctionnement mais la photo ne s'affiche pas ;-)

[papich]

Merci pour l'astuce il manque la photo

 

Cela fonctionne sous 1.5.4.1?