css - css で複数ピースの画像を表示する

Question

各セルの最初の行に 2 つのタブを表示しようとしているテーブルがあります。左のタブを 3 つの画像 (左、中央、右) に分割し、テキストを表示します。左マージンに揃える必要があります。右のタブにはテキストがなく、右マージンに揃える必要があります。2 つのタブの間には、2 つのタブを接続するタブの下部にある線があります。右側のタブは 1 つの画像で、コネクタも 1 つの画像であるため、表示したい画像は 5 つです。また、テキスト (実行中) とセル (そうでない) に合わせて伸縮する必要があります。

次のようになります。

[文章]__[]

左のタブは正常に表示されていますが、右のタブは表示されていません。これが私のコードです：

HTML

<div class='category'>
<span><span><span><span>".$results['category']."</span></span></span></span></div>
<div class='righttab'><span><span></span></span></div>

CSS

.category
    {
    display: block;
    }
.category *
    {
    height: 27px;
    }
.category span
    {
    display: block;
    float: left;
    color: rgb(240,208,128);
    }
.category span span
    {
    background: url(tabmiddle.png) top left repeat-x;
    float: left;
    margin: 0 0 0 0px;
    }
.category span span span
    {
    background: url(tabright.png) top right no-repeat;
    float: left;
    display: block;
    padding-right: 19px;
    }
.category span span span span
    {
    background: url(tableft.png) top left no-repeat;
    display: block;
    padding-left: 19px;
    padding-top: 3px;
    }
.righttab
    {
    display:block;
    float: right;
    }
.righttab span
    {
    background: url(topborder.png) top repeat-x;
    display: block;
    }
.righttab span span
    {
    background: url(righttab.png) top right no-repeat;
    display: block;
    float: right;
    margin-left: 75px;
    }