为动态添加的HTML表提供边框

本文关键字：边框 HTML 动态 添加 | 更新日期: 2023-09-27 18:04:46

我在代码后面动态添加了一个HTML表。

我可以给整个表一个边框。

如何对每一行执行此操作?我想在每一行下面添加边框。

如何在运行时向单元格添加超链接?

我试过的是

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

我的CSS:

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

为动态添加的HTML表提供边框

对于问题的第一部分，您可以通过添加一个简单的css规则来添加边框，而无需更改标记生成:

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

有一个关于样式表的概述，一般通过about.com和w3c学校

注意，你还需要在表上设置border-collapse: collapse; css属性。

我给你放了一个jsFiddle的例子。

您可以将CSS规则放置在CSS部分(注意我还添加了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>

你也可以考虑删除float-left css属性，只将.float-left更改为table，以进一步简化你的代码。

对于你问题的第二部分:

，并在运行时为表中的每个值添加一个超链接

你可以简单地使用htmlchclass。

实际上，一个简单的例子是: 
HtmlAnchor htmlanchor = new HtmlAnchor();
htmlanchor.HRef = "http://www.linkurl.com";
htmlanchor.InnerText = "My Link Text";
//Add it to a cell
cell.Controls.Add(htmlanchor);

这将为单元格添加一个超链接。

您可能还想考虑使用ASP Repeater Control或DataGrid控件，因为它们都为您提供了模板标记的选项。

你需要在TR (row)上添加一个css

或像这样的内联边框:

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

@Moondust是正确的，但是他缺少Style标签，这就是为什么没有效果。此外，你不能在<tr>元素上设置样式。你必须把它设置在<td>上。

ie

这里的<tr>样式不做任何事情。<td>可以!

<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>

要实现底部边框，至少在单元格中，它是…

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

要对一行进行操作，就必须对每个单元格进行操作。抱歉

相关文章：