CODEWITHSUNDEEP
c#htmlstylesheet
user2177370
user2177370

Reputation: 33

Giving Borders to the dynamically added HTML table

I have a HTML table added dynamically in my Code behind.

I am able to give the entire table a border.

How can I do this for each row? I want to add a border under each row.

How can I add a hyperlink to cells at runtime?

What I have tried is 

tdr.Width = "100px";
tdr.Attributes.Add("class", "float-left");

row = new HtmlTableRow(); 
cell = new HtmlTableCell();
cell.InnerText = doc;
row.Cells.Add(cell);
tdr.Rows.Add(row);

row = new HtmlTableRow(); 
cell = new HtmlTableCell();
cell.InnerText = "No Timming";
row.Cells.Add(cell);
tdr.Rows.Add(row);

row = new HtmlTableRow(); 
cell = new HtmlTableCell();
cell.InnerText = weekday[i];
row.Cells.Add(cell);
tdr.Rows.Add(row);

And my CSS:

<style type="text/css">
    .float-left
    {
        float:left;
        border-style:solid;
        border-width:2px;
        border-color:Black;
    }
</style>

Upvotes: 0

Views: 11179

Answers (3)

Fandango68
Fandango68

Reputation: 4838

@Moondust is correct but he's missing the Style tag which is why there is no effect. And besides, you cannot set style on a <tr> element. You have to set it on the <td>.

ie

The <tr> style here does nothing. The <td> does!

<tr style="border-color:black;border-style:solid;border-width:thin;">
  <td width="100px" style="border-bottom: black thin solid;">Boarder</td>
  <td style="background-color:#FFFF00;" width="10px"></td>
</tr>

To achieve a bottom border, at least in the cell, it's...

row.Cells[0].Attributes.Add("style", "border-bottom: black thin solid;");

So to do it for a row, you have to do it for each cell. Sorry

Upvotes: 0

dash
dash

Reputation: 91472

For the first part of your question, you can add the borders without changing your markup generation by adding a simple css rule:

tr {
  border-bottom: solid 1px black;
}

There is an overview about styling tables in general via both about.com and w3c schools

Note that you'll also need to set the border-collapse: collapse; css attribute on the table.

I've put an example jsFiddle up for you.

You can place the CSS rule in your CSS section (note I've also added the border-collapse):

<style type="text/css">

    tr {
      border-bottom: solid 1px black;
    } 

    .float-left{
        float:left;
        border-style:solid;
        border-width:2px;
        border-color:Black;
        border-collapse: collapse;
    }

</style>

You could also consider removing the float-left css attribute and just change .float-left to be table to further simplify your code.

For the second part of your question:

and add a hyperlink to each of the values in the table at run time

You can simply use the HtmlAnchorClass.

In effect, a simple example is:

HtmlAnchor htmlanchor = new HtmlAnchor();
htmlanchor.HRef = "http://www.linkurl.com";
htmlanchor.InnerText = "My Link Text";
//Add it to a cell
cell.Controls.Add(htmlanchor);

This will add a hyperlink to your cell.

You may also want to consider using the ASP Repeater Control or the DataGrid control as each of these give you the option to template your markup.

Upvotes: 2

Moondustt
Moondustt

Reputation: 884

you need to add a css on your TR (row)

or an inline border like this:

 row.Attributes.Add("border-bottom", "solid red 1px");

Upvotes: 1

Related Questions