CODEWITHSUNDEEP
asp.netweb-applicationsc#-2.0
Pavel Nefyodov
Pavel Nefyodov

Reputation: 896

How to align cell vertically with RowSpan>1

I want to have this enter image description here, but instead have this enter image description here. Please note, when I change VerticalAlign.Middle to VerticalAlign.Top it actually works as expected. Please see below code that I am trying:

   // I assume that table table is already created and well-defined  
   // Create a new row

    TableRow tRow = new TableRow();

    tRow.HorizontalAlign = HorizontalAlign.Center;

    // add the row to the table

    table.Rows.Add(tRow);

    // Create a new cell

    TableCell tCell = new TableCell();

    tCell.VerticalAlign = VerticalAlign.Middle; // Want to get it in the middle of two merged rows

    tCell.RowSpan = 2;

    tCell.Text = "England";

    tCell.Font.Bold = true;

    tRow.Cells.Add(tCell);

    // Create new cell

    tCell = new TableCell();

    tCell.Text = "2010";

    tCell.Font.Bold = true;

    tRow.Cells.Add(tCell);

    // Create new row

    tRow = new TableRow();

    // add the row to the table

    table.Rows.Add(tRow);

    // Create new cell

    tCell = new TableCell();

    tCell.Text = "2011";

    tCell.Font.Bold = true;

    tRow.Cells.Add(tCell);

Update: Please see extra code below. I don't have html code as such, but I looked at sw.ToString() and formatting looks right but still excel file does not seem to be rightly formatted. My browser is IE but I think it does not matter. I tried tCell.CssClass = "className"; result is the same.

public static void Comparison_Report(string fileName)
{
HttpContext.Current.Response.Clear();
HttpContext.Current.Response.AddHeader("content-disposition", string.Format("attachment; filename={0}", fileName));
HttpContext.Current.Response.ContentType = "application/ms-excel";
using (StringWriter sw = new StringWriter())
{
using (HtmlTextWriter htw = new HtmlTextWriter(sw))
{
// Create a table to contain the grid
Table table = new Table();

///----- Original code goes here----

// render the table into the htmlwriter
table.RenderControl(htw);
// render the htmlwriter into the response  
HttpContext.Current.Response.Write(sw.ToString());
HttpContext.Current.Response.End();
}

}

}

Upvotes: 3

Views: 10628

Answers (3)

mrtwin
mrtwin

Reputation: 1

<td   align='left' valign='middle' ></td>

Not working in exporting excel file from code behind.so i search in internet and found this example.

td.className {
   vertical-align:middle;
}

this save my time. Thanks

Upvotes: 0

Tim Schmelter
Tim Schmelter

Reputation: 460108

Finally i've tested it by myself. It seems not to work in Excel if you use valign="middle" on your table-cell. You must use CSS.

So instead of

tCell.VerticalAlign = VerticalAlign.Middle

do

tCell.Style.Add("vertical-align", "middle")

That will align the text correctly in excel. Excel itself uses css-classes if you export it from excel to html.

But repeating my comment, i would recommend to generate a real excel file instead of creating html that might be openened and interpreted correctly. It's very simple with EPPlus: Exporting data to excel

Upvotes: 2

Dave Walker
Dave Walker

Reputation: 3523

Do this in CSS please!! Set a class on the cell that you want to have 'England' in it and target that class.

Code

tCell.Text = "England";
tCell.CssClass = "className";

Css

td.className {
   vertical-align:middle;
}

Edit Ok so by popular demand an explanation for why to use CSS here rather than set this in the creation of the table cell.

What you gain from using a seperate stylesheet is a whole heap of power and control on how this element is going to look on the client. When you set this in code you are explicitly saying it should only be like this - however when you set it in CSS and use a stylesheet you can do things like target different platforms, change the position easily, add extra elements etc. This is the old discussion between having inline style and pulling the style out into a separate sheet. I think this topic is quite well discussed on the web if you care to read more about it...

Edit 2 I just tried your code as you pasted it and it worked fine for me - the cell was middle aligned. I would use Firebug to try figure out if there are some other styles that are acting on that table cell to make it have this behavior.

Upvotes: 2

Related Questions