Ajouter une autre image dans le td?

Question

Je voudrais ajouter une image de la flèche dans le <tr class="sub-title"> sur la bonne position.

Quelle est la manière correcte de le faire sans ajouter un autre td dans le <tr class="sub-title">?

.sub-title td contient l'image de fond et le centre d'alignement du texte.

.sub-title .arrow-toggle contiennent une image en flèche.

<table style="margin-top:-185px;" border="1"> 
    <tbody> 
    <tr> <td> Item 1 </td> </tr> 
    <tr class="sub-title"> 
     <td colspan="5">Sub-Title Here<span class="arrow-toggle"></span></td> 
    </tr> 
    <tr> <td> Item 2 </td> </tr> 
    <tr> <td> Item 2 </td> </tr> 
</tbody> 
</table> 

CSS

.sub-title .arrow-toggle { 
     background: url(/public/images/toggle-arrow.png) no-repeat; 
     width: 20px; 
     height:20px; 
     float:right; 
    } 



    .sub-title td { 
     background: url(/public/images/subtitle.gif) repeat-x; 
     color:white; 
     padding: 5px; 
     font-weight: bold; 
     border-top:none; 
     border-bottom:1px solid #4799bd; 
    } 

Answer 1

vous êtes actuellement presque. Vous venez d'oublier que la travée est un élément en ligne, qui ne peut pas avoir de flotteur, une largeur et une hauteur qui lui sont appliquées. Juste ajouter display: block à votre classe .arrow-toggle devrait faire l'affaire.