4

this is really frustrating and have search a dozen sites:

I have a <asp:table id="questionsTable" runat="server"> to which i dynamically add rows and columns. I am trying to add a predefined Cssclass to these newly created rows and columns, but to no avail.

The setup code for the rows and columns:

TableRow row = new TableRow();
TableCell cell1 = new TableCell();
TableCell cell2 = new TableCell();
TableCell cell3 = new TableCell();
TableCell cell4 = new TableCell();
TableCell cell5 = new TableCell();

I know i can do this:

row.Style.Add("width", "80%");
row.Style.Add("text-align", "left");

cell1.Style.Add("width", "10px");
cell2.Style.Add("width", "auto");
cell3.Style.Add("width", "75px");
cell4.Style.Add("width", "75px");
cell5.Style.Add("width", "75px");

And it works... but it makes the code-behind file messy.

So i've seen this: 

row.Attributes.Add("Class", "rowA");

//CSS - in StyleSheet.css
.rowA
{
    width:80%;
    text-align:center;
    background-color:#FCF6CF;
}

But it does not seem to be working for me....

But strangely enough if i look at the markup source generated i get this

    </tr><tr Class="rowA">

The above is copied from the rendered page - yet the Css is not being applied... I know the css is correct because if i add it manually it applies it correctly.

EDIT

To all who assisted in this thank you very much. Unfortunately something went wrong and the link to the external stylesheet got deleted. Kudos to Sven for thinking of that. After a long day such as today i to can make beginner mistakes.

thank you once again

Kind regards

Aiden

Aiden Strydom
  • 1,198
  • 2
  • 14
  • 43
  • 2
    did you try `row.CssClass="rowA";` – Harry89pl Aug 30 '12 at 11:46
  • 2
    when the generated html output of the row has the class, then there is the css file not linked in the html file, or you have a typo in the class name. – Sven Bieder Aug 30 '12 at 11:47
  • 1
    Are you sure it's not applied? Maybe it's being overwritten by another rule (e.g. on the `td`'s)? As far as I can tell from the info you provided things should work. Have you worked with *Firebug* or the dev toolbar in any browser yet? You can see in those tools what rules are applied as well as what's being overridden. – Jeroen Aug 30 '12 at 11:47
  • I do agree with @Jeroen, it seems fine for me. CSS is case sensitive, but HTML not. What means that your markup seems fine. – Andre Calil Aug 30 '12 at 11:50
  • What's the version of HTML that you are declaring on the top of the page? – Andre Calil Aug 30 '12 at 11:51
  • @Sven Bieder ...Really i feel so ashamed - some how the link to the stylesheet got deleted and I DONT know how! Please mate post your comment as an answer and let me accept – Aiden Strydom Aug 30 '12 at 12:12
  • @Aiden that happens to everyone, sometimes we are just blind :) I have posted it as answer – Sven Bieder Aug 30 '12 at 12:17

3 Answers3

7

Your class attribute should be lowercase (XHTML):

row.Attributes.Add("class", "rowA");

Also make sure your including the CSS file in the page your rendering your table.

James
  • 80,725
  • 18
  • 167
  • 237
  • yes... html is not case sensitive – Aiden Strydom Aug 30 '12 at 12:05
  • I have removed the word *must* to *should*. @AidenStrydom as per your comment "*some how the link to the stylesheet got deleted and I DONT know how*" - doesn't this mean my answer was correct? – James Aug 30 '12 at 12:14
5

When the generated html output of the row has the class, then there is the css file not linked in the html file, or you have a typo in the class name.

Sven Bieder
  • 5,515
  • 2
  • 21
  • 27
1

There is nothing wrong with your code behind. Its your CSS that is wrong.

Refer the W3 docs on tables:

the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

if you want the rows to have 80% width, you should set the table width to 80%. Like this:

<asp:table id="questionsTable" runat="server" class="myTable">

.rowA
{
   text-align:center;
   background-color:#FCF6CF;
}

.myTable{
   width:80%;
}
nunespascal
  • 17,584
  • 2
  • 43
  • 46
  • As stated above in the question itself if that were the case i couldn't be able to see the content but i do.. if i add the style manually it works fine - but interesting none the less – Aiden Strydom Aug 30 '12 at 12:16