如何引导不应分解列的表？

Posted 2023-03-05

【中文标题】如何引导不应分解列的表？

【英文标题】：How can I bootstrapify a table whose columns should not be broken up?

【发布时间】：2016-05-12 22:47:51

【问题描述】：

我正在 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，如果只是缩小，在微不足道的设备上很难看到。

有没有办法对这样的表格进行增强，使其既保留其语义清晰性又保留其视觉易读性？

【参考方案1】：

在您的 html 页面中包含 Bootstrap css 和 js 文件。 将class="table" 添加到您的table 用class="table-responsive" 将您的表格包裹在div 中 从在小屏幕上查看时具有滚动条的表格中获利 设备

【讨论】：

一个水平滚动条我拿它？

正确，当表格比视口宽时会出现水平滚动条。