Learn how to create a series of table rows using CSS, followed by another series of table rows

I have an array of tables, each with a size of 6 x 6, and a placeholder. My goal is to arrange these tables in the placeholder so that they appear in rows of 6 next to each other. I am unsure about which CSS properties to apply to achieve this layout.

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

However, I am struggling to figure out how to start a new row after each set of 6 tables. As someone new to CSS, I find the process challenging. The initialization of the tables and the definition of 'mGrid' have already been completed elsewhere.

c#cssasp.net

Answer №1

If you need to efficiently organize 36 tables, consider placing them inside a parent table with dimensions of 6x6.

https://i.sstatic.net/YfHVt.png

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with the JQuery Lightbox 2 Plugin

I'm currently in the process of developing a gallery using jQuery Lightbox 2 (visit the plugin page here). I am encountering an issue where the navigation entries remain visible even when an image is selected (view example here). The navigation is cre ...

jquerycsspluginslightboxlightbox2

The crossIcon on the MUI alert form won't let me close it

I am facing an issue with my snackBar and alert components from MUI. I am trying to close the alert using a function or by clicking on the crossIcon, but it's not working as expected. I have used code examples from MUI, but still can't figure out ...

javascriptcssreactjsmaterial-ui

Is this an appropriate method for implementing a 301 redirect?

When I use online host header analyzers to check my page, it shows a status of 200 OK. However, when I view the page in my browser, it redirects to another website (which is the intended behavior). The code I am using is: context.Response.Status = "301 ...

asp.nethttp-redirecthttp-status-code-301

Execute a jQuery function every time the class of the parent container div changes

I am seeking to trigger the function below whenever its containing div parent <div class="section">...</div> transitions to an "active" state, for example: <div class="section active">...</div> $(".skills-grid__col").each(function ...

javascriptjqueryhtmlcss

How can I preloaded self-hosted fonts in Next.js without receiving a console warning for not using the resource within a few seconds?

I am working on a project in Next.js and I want to preload my self-hosted fonts. In my code, I have the following setup: Inside my _app.js file: <Head> <link rel="preload" href="/fonts/leira/Leira-Lite.t ...

htmlcssfontsnext.jspreload

What is the process for creating a fade out effect with JavaScript?

https://i.sstatic.net/1qgWt.png Is there a way to create a fade out effect in JavaScript? In the image provided, you can see that when you click on a day, a box slides down. If you click on another day, the previous box slides back up while a new box slid ...

javascripthtmlcss

What is the best way to display a unique image in a div based on the size of the

Being new to web design, I have a question about creating a webpage with a large image in the center like on GitHub's Windows page. How can I work with the image inside that particular div or area based on different screen sizes? Is it possible to mak ...

javascripthtmlcssimagejquery-plugins

Tips for ensuring your background image is fully displayed and covers the entire size

My dilemma lies within the header div. My intention is to have it fully covered with a background image without any cropping. However, the current setup seems to be stretching and cutting off parts of the image. Here is my CSS code: .header { bor ...

htmlcssbackground-imagecontaincover

Unable to adjust the border radius of a filled text-field variant in Material-ui-core

Situation at Present ...

javascriptcssreactjsmaterial-uistyled-components

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

javascriptjqueryhtmlcssvalidation

Unable to achieve panel sliding out with jquery

I am attempting to achieve a sliding effect for the gray panel. My goal is to have the entire div (with a gray background) slide out when clicking on "target 1", "target 2", or "target 3" before the other colored panels slide in. Subsequently, when the u ...

javascriptjqueryhtmlcss

Ensuring consistent placement and scrollability of two divs across all screen sizes

I am in need of a solution to fix the top and bottom divs in the given image. The scroll should only occur when there is overflow. <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> ...

javascriptjqueryhtmlcss

How can I place a div using pixel positioning while still allowing it to occupy space as if it were absolutely positioned?

I successfully created an slds path element with multiple steps. I want to display additional subtext information below each current step, but there might not always be subtext for every step. To achieve this, I created an absolute positioned div containi ...

javascripthtmlcss

The background color in the HTML file remains unchanged

Hello everyone, this is my debut post here. I can't seem to figure out why the background color isn't changing for me. Even though I have applied the bg color property, it's not taking effect as expected. <body bgcolor="#f0ffff"> T ...

htmlcsscolorsbackground

React JS onClick() failing intermittently

I've spent hours trying to solve this problem. The issue first arose on iOS while working on a website I had recently launched. I've tested the code below, and it works correctly 90% of the time, but occasionally fails. <button className=" ...

javascripthtmlcssreactjsonclick

Comparison: C++ MFC or .NET - Which one should you choose

My team members are currently using Visual Studio 2002 with C++ MFC while I am working on my projects in C#. So far, we haven't encountered any major issues, but now our clients are questioning whether it is necessary for us to be developing in differ ...

c#.netc++mfcvisual-c++

Is it possible to convert nested CSS into Material-UI's CSS in JS method?

Here is the code for embedding an iframe: <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: abso ...

javascriptcssreactjsiframematerial-ui

Entity framework may not be the best choice for this situation

Here is the challenge I'm facing: I am working with 10 databases (D1, D2, ....D10) all having the same schema but different data in their tables. Unfortunately, I do not have control over these databases as they belong to different companies. Now, I ...

asp.net.netentity-frameworkentity

The concept of "String Interning" involves storing

Below is a snippet of code where I am checking the equality of object references. string x = "Some Text"; string y = "Some Other Text"; string z = "Some Text"; Console.WriteLine(object.ReferenceEquals(x, y)); // False Console.WriteLine(object.ReferenceEq ...

c#.netstring

Use jQuery to set a Firebase image as the background of a div element

Is there a way to fetch an image from Firebase and use it as the background for a div element? I've tried several approaches without success. Could someone share some examples on how to achieve this? <div class="museBGSize rounded-corners grpelem" ...

javascriptjquerycssfirebasefirebase-realtime-database