How can I load a table whose columns should not be split?

Question

I am creating an HTML table in C #, for example:

int quadCheck = -1;
int rowNum = 0;
foreach (ProduceUsage puRec in puList)
{
    builder.Append("<tr align='left' valign='top'>");

    quadCheck++;
    rowNum++;
    // Print the Description on the first iteration of every four rows
    if ((quadCheck.Equals(0)) || (quadCheck % 4 == 0))
    {
        rowNum = 1;
        builder.Append("<td rowspan=\"4\" class=\"description\">");
        builder.Append(puRec.ItemDescription.ToUpper());
        builder.Append("</td>");
    }

    if (rowNum.Equals(PACKAGES))
    {
        builder.Append("<td>");
        builder.Append(DATA_ROWLET1_TOTAL_PACKAGES);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth1);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth2);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth3);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth4);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth5);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth6);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth7);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth8);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth9);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth10);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth11);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth12);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PackagesMonth13);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append("Calc later");
        builder.Append("</td>");
    }    
    else if (rowNum.Equals(PURCHASES))
    {
        builder.Append("<td>");
        builder.Append(DATA_ROWLET2_TOTAL_PURCHASES);
        builder.Append("</td>");

        builder.Append("<td>");
        builder.Append(puRec.PurchasesMonth1);
        builder.Append("</td>");
        . . .

It displays in my desktop browser (Chrome) as follows:

On a chime device, although (a tablet or, for example, a phone), the user will need a magnifying glass to read the data if the aspect ratio is saved - or I have to say if each line remains together on one line.

I think the data will be too complicated if it is split into several lines. OTOH, it's too hard to see on an unreliable device if it is just burned.

Is there a way to increase the efficiency of a table so that it retains its semantic clarity as well as its visual clarity?

Answer 1

• css js Bootstrap html.
• class="table" table
• div class="table-responsive"
• ,