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

在html页面中包含Bootstrap css和js文件。
将class="table"添加到您的table
使用div

class="table-responsive"

从小表格中查看滚动条的表格中获利设备

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

1 个答案: