如何使用 RowSpan>1 垂直对齐单元格答案

【问题标题】：How to align cell vertically with RowSpan>1如何使用 RowSpan>1 垂直对齐单元格
【发布时间】：2015-06-05 11:37:05
【问题描述】：

我想要这个，而是有这个。请注意，当我将 VerticalAlign.Middle 更改为 VerticalAlign.Top 时，它实际上按预期工作。请查看我正在尝试的以下代码：

   // 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);

更新：请参阅下面的额外代码。我没有这样的 html 代码，但我查看了 sw.ToString() 并且格式看起来正确，但仍然 excel 文件似乎没有正确格式化。我的浏览器是IE，但我认为没关系。我试过 tCell.CssClass = "className"; 结果是一样的。

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();
}

}

}

【问题讨论】：

它对我有用（见图片here），所以一定有别的东西弄乱了你的html。
哇，真快！对我来说，它也适用于 VerticalAlign.Top，但它不适用于 VerticalAlign.Middle。这就是为什么我提出这个问题。这在我的文件中没有其他内容。我发现您的评论比答案更有价值！
这在其他浏览器中是否有效，您用什么浏览器测试过？也发布生成的 HTML。
在 IE 中工作。请参阅 HTML 问题的更新。
附带说明，您是否考虑过创建一个真正的 excelsheet 而不是 HTML-Table？这是very simple with EPPlus。

标签： asp.net web-applications c#-2.0

【解决方案1】：

最后我自己测试了它。如果您在表格单元格上使用valign="middle"，它似乎在 Excel 中不起作用。您必须使用 CSS。

所以不是

tCell.VerticalAlign = VerticalAlign.Middle

做

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

这将在 excel 中正确对齐文本。如果将 Excel 从 excel 导出到 html，则 Excel 本身会使用 css 类。

但重复我的评论，我建议生成一个真正的 excel 文件，而不是创建可能被正确打开和解释的 html。使用 EPPlus 非常简单：Exporting data to excel

【讨论】：

刚刚检查过了。它就像一个魅力！我实际上不是从 Excel 导出到 HTML，而是从 HTML-> Excel 导出。那么我的方法和创建“真实”的 Excel 文件有什么区别？
@Pavel：我只提到了 excel 本身是如何导出到 html 的，因为这是我检查 excel 可以理解什么和不可以理解什么的方式。您的文件和 excel 文件之间的区别在于您正在创建损坏的 html（甚至根本没有 HTML/Head/Body-tags）。 “真实”的 excel 文件不仅具有扩展名 xls 或 xlsx，而且是一个隐藏的 html 文件。它是一个二进制文件。以下是一些优点和缺点：stackoverflow.com/questions/150339/…

【解决方案2】：

请在 CSS 中执行此操作！在您希望在其中包含“英格兰”的单元格上设置一个类并定位该类。

代码

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

CSS

td.className {
   vertical-align:middle;
}

编辑好的，根据大众的需求，解释为什么在这里使用 CSS 而不是在创建表格单元格时设置它。

您从使用单独的样式表中获得的好处是可以控制该元素在客户端上的外观。当您在代码中设置它时，您明确地说它应该只是这样 - 但是当您在 CSS 中设置它并使用样式表时，您可以执行诸如针对不同平台、轻松更改位置、添加额外元素等操作。这就是具有内联样式和将样式拉到单独的工作表中的旧讨论。我认为这个话题在网上已经得到了很好的讨论，如果你想阅读更多关于它的信息......

编辑 2 我刚刚在您粘贴代码时尝试了您的代码，它对我来说效果很好 - 单元格居中对齐。我会使用 Firebug 来尝试确定是否有其他样式作用于该表格单元格以使其具有此行为。

【讨论】：

这既不能解决 OP 的问题，也不能解释 为什么他应该使用 CSS 而不是他编译的内联版本。
不完全是我的问题的解决方案，但非常接近。投票 +1 认为有帮助。

【解决方案3】：

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

无法从后面的代码中导出 excel 文件。所以我在互联网上搜索并找到了这个示例。

td.className {
   vertical-align:middle;
}

这节省了我的时间。谢谢

【讨论】：