使用CSS如何使表行跟随表行

时间:2017-07-11 21:49:30

标签: c# css asp.net

我有一个表数组。例如6 x 6.和PlaceHolder。 我需要将表6彼此相邻放置在PlaceHolder中,然后将新的6行放在彼此旁边,等等。我为每个网格添加了哪些css属性来实现此目的。 我有

LiteralControl ltr = new LiteralControl();
ltr.Text = "<style type=\"text/css\" rel=\"stylesheet\">" + @".fl { float: left}</style>";
this.Page.Header.Controls.Add(ltr);

Table[,] tableArray = new Table[6,6];

for (int j = 0; j < tableArray.GetLength(0); j++)
{
    bool first = true;
    for (int i = 0; i < tableArray.GetLength(1); i++)
    {
        if (first)
        {                          
            tableArray[j, i].CssClass = "mGrid";                           
            first = false;
        }
        else
        {
            tableArray[j, i].CssClass = "fl mGrid";
        }

        tableArray[j, i].Width = Unit.Percentage(100 / 6);
        PlaceHolderTables.Controls.Add(tableArray[j, i]);
    }                    
}

但我不知道如何开始新的行,然后在它旁边有5个等等。我对CSS缺乏经验。这些表已在其他位置初始化。 mGrid也在其他地方定义。

1 个答案:

答案 0 :(得分:2)

您可以将这36个表放在一个包含6x6的表中。

enter image description here

protected void Page_Load(object sender, EventArgs e)
{
    LiteralControl ltr = new LiteralControl();
    ltr.Text = "<style type=\"text/css\" rel=\"stylesheet\">" + @".fl { float: left}</style>";
    Page.Header.Controls.Add(ltr);

    Table main = new Table();
    for (int i = 0; i < 6; i++)
    {
        TableRow row = new TableRow();
        for (int j = 0; j < 6; j++)
        {
            Table table = CreateTable($"{i}x{j}");
            TableCell cell = new TableCell();
            cell.Controls.Add(table);
            row.Controls.Add(cell);
        }
        main.Controls.Add(row);
    }
    PlaceHolderTables.Controls.Add(main);
}

private Table CreateTable(string text)
{
    TableCell cell = new TableCell();
    cell.Controls.Add(new Literal {Text = text });

    TableRow row = new TableRow();
    row.Cells.Add(cell);

    Table table = new Table();
    table.Rows.Add(row);
    return table;
}