Question

I would like to add an arrow image in the <tr class="sub-title"> on the right position.

What is the correct way doing this without adding another td in the <tr class="sub-title">?

.sub-title td contain background image and text align center.

.sub-title .arrow-toggle contain arrow image.

<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

you are actualy almost there. You just forgot that the span is an inline element, wich can not have a floet, width an height applied to it. Justing adding display: block to your .arrow-toggle class should do the trick.