Setting a css class for TD

Question

I am using a customized user control (that I don't have the permission to modify) which renders the HTML for a table as shown:

<tr>
  <td></td>
  <td></td>
</tr>

It lets me add any control dynamically within the tags. My question is how would I set the style of the cell for the table cell. Normally, I would do <td class="myClass">. Since I don't have the source code to modify it, the workaround I am using is to create a <div>, set the CSS class and add it to the <td>. The code looks something like this:

  HtmlGenericControl divControl = new HtmlGenericControl("div");
  divControl.Attributes.Add("class", "myClass");
  //Add a textbox to divControl.
  //Add the divControl to the customized user control

This does not give me the same UI I am expecting.

Answer 1

Try using a SPAN instead of a DIV. A DIV is a block-level element that carries some extra formatting baggage along with it. The SPAN is an inline element and won't alter the presentation semantics the way a DIV will.

You might also be able to use hierarchical CSS selectors to achieve the same effect without having to wrap the contents of the table element in a container. This would probably be true if your CSS class were to apply equally to all table elements, but wouldn't work if they were to apply to some and not others.

Answer 2

If you can, just add a DIV before the table is generated. The class name for the outer div will be inherited by the TD elements:

<div class="MyClassName">
   //table code here
</div>

Then you can use CSS as follows:

.MyClassName TD { //CSS here }

Answer 3

After your control is added to the page's control tree you can use it's "parent" property to work up the tree to the table control.

NewDynamicControl.Parent.Parent.Parent.Attributes.Add("class", "myClass")

This assumes you have good knowledge of what the usercontrol you are adding to looks like and that it won't be changed by someone else and end up breaking your code later.