如何引导不应该拆分列的表？

Question

我在C#中创建一个HTML表,如下所示:

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

它显示在我桌面的浏览器(Chrome)上,如下所示:

然而,在一个较薄的设备(平板电脑或者egads !,手机)上,如果保留了宽高比,用户将需要放大镜来读取数据 - 或者我应该说,如果每行在一条线上重新组合在一起.

我认为如果多行分解,数据将难以理解.OTOH,如果只是收缩,就很难在一个微不足道的设备上看到它.

有没有办法提升像这样的表格,以便它既保留了语义清晰度又保持了视觉易读性？

Answer 1

1. 在html页面中包含Bootstrap css和js文件.
2. 加入class="table"你的table
3. 把你的桌子包div起来class="table-responsive"
4. 从在小型设备上查看时将具有滚动条的表中获利