Style individual RadioButtonList ListItem - asp.net

Question

I know that you can assign a class to the generated table by using CssClass on the RadioButtonList but I need to be able to style the generated <td>'s individually.
Easy with JQuery but I'd much rather not have to resort to that.
Adding cssClass="myClass" to the ListItem results in the following broken HTML
<table id="myTable">
<tbody>
<tr>
<td>
<span cssclass="some_class"> // Well this is rubbish!
<input id="myRadioInput" type="radio" name="myRadioInput" value="myValue" >
<label for="myRadioInput">myLabel</label>
</span>
</td>
<td>
<input id="myRadioInput2" type="radio" name="myRadioInput2" value="myValue2">
<label for="myRadioInput2">myLabel2</label>
</td>
</tr>
</tbody>
</table>
So my question is: Is it actually posible to either assign a class or apply inline styling to the generated <td>'s INDIVIDUALLY?
PLEASE NOTE
This is a question about ASP.NET. Answers that simply tell me how to style HTML elements are not answering the question.

Answer 1

If you want to do it in code (e.g. if you need to dynamically adjust the style based on complicated logic) you can set the style attribute on the ListItem (setting the class attribute might work as well but if your ListItem is disabled, asp.net will override it with a special aspNetDisabled class):
item.Attributes["style"] = "color: lightgray; font-style: italic;";

Answer 2

To style all the td's you could add the CSS like so...
#myTable td{
color:Red;
}
Other than that (if you wanted different styles for each td) jQuery would be the only way to add classes to those generated td's.
$('#myTable td:eq(0)').addClass('td1');
$('#myTable td:eq(1)').addClass('td2');
...
OR
$.each($('#myTable td'), function(i){
$(this).addClass('td'+i);
});
This is one of the reasons I dislike ASP.NET controls with all the extra markup you have no control of through the properties panel.

Answer 3

You can do it as follows:
<table>
<tr>
<td class="yourcssclassname"></td>
<td class="yourcssclassname2></td>
</tr>
</table>
<style type="text/css">
.yourcssclassname
{
padding: 10px;
}
.yourcssclassname2
{
padding: 15px;
}
</style>
or you can
<table>
<tr>
<td style="padding:10px;"></td>
<td style="padding:15px;"></td>
</tr>
</table>
Hope this helps

Answer 4

You are so close to the solution. Add class attribute instead of cssclass on the items for individual styling. This will add a span tag surrendering the input and label tags with the right class.
<style>
.radiobuttonlist .red { display: block; background-color: red; }
</style>
<asp:RadioButtonList runat="server" CssClass="radiobuttonlist">
<asp:ListItem Text="Item1" Value="1" ></asp:ListItem>
<asp:ListItem Text="Item2" Value="2" class="red" ></asp:ListItem>
<asp:ListItem Text="Item3" Value="3" ></asp:ListItem>
</asp:RadioButtonList>

Answer 5

You can target the input elements and labels with:
input[type="radio"] { margin-right:10px; }
input[type="radio"] + label { color:red; }
If you had a class on the table, you could add that to be more explicit. Should be backwards compatible to IE7.