Switching image and text locations in a table header

[tacticalts]

I have a table with th tags. I would like to move the arrows from the left of the text to the right and right-justify the arrows as well.

Here is my css

table.spry th {border: 1px solid #000000; font-family:Verdana; }

table.spry td {border: 1px solid #000000; font-family:Verdana; }

table.spry th.sortable:hover { cursor: pointer; }

table.spry th.sortable { padding-left:20px; text-align:left; color:#FFFFFF; background: #8F001C url(../SpryAssets/bg.gif) 1px no-repeat; }

table.spry th.ascending { padding-left: 20px; background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) 8px no-repeat;  }

table.spry th.descending { padding-left: 20px; background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) 8px no-repeat; }

Here is my html for the table

Last Name
First Name
Company
State
JD
MBA

Basically, what I’m getting in the header is the arrow and then my text. What I’d like is my text 1st and then right justified the arrow.

Thanks

[Josh]

That might be easy. If I’m reading this right all you should have to do is change your CSS to look something like this

table.spry th.sortable {

padding:5px 20px 5px 5px; text-align:left; color:#FFFFFF;

background: #8F001C url(../SpryAssets/bg.gif) center right no-repeat;

}

table.spry th.ascending {

padding:5px 20px 5px 5px; text-align:left; color:#FFFFFF;

background: #8F001C url(../SpryAssets/SpryMenuBarUpHover.gif) center right no-repeat;

}

table.spry th.descending {

padding:5px 20px 5px 5px; text-align:left; color:#FFFFFF;

background: #8F001C url(../SpryAssets/SpryMenuBarDownHover.gif) center right no-repeat;

}

That looks about right. Try it out and tell me what you get. You might need to adjust padding and what not to what you like.

[Author]

Posts