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

我正在用C#创建一个HTML表，如下所示：

intquadcheck=-1；
int rowNum=0；
foreach（puList中的ProduceUsage puRec）
{
生成器。追加（“”）；
quadCheck++；
rowNum++；
//在每四行的第一次迭代中打印描述
如果（（quadCheck.Equals（0））| |（quadCheck%4==0））
{
rowNum=1；
生成器。追加（“”）；
Append（puRec.itemsdescription.ToUpper（））；
生成器。追加（“”）；
}
if（rowNum.Equals（包））
{
生成器。追加（“”）；
附加（数据\u行1\u总计\u包）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth1）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth2）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth3）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth4）；
生成器。追加（“”）；
生成器。追加（“”）；
生成器追加（puRec.PackagesMonth5）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth6）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth7）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth8）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth9）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth10）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth11）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth12）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PackagesMonth13）；
生成器。追加（“”）；
生成器。追加（“”）；
建造商。追加（“以后计算”）；
生成器。追加（“”）；
}    
else if（rowNum.Equals（购买））
{
生成器。追加（“”）；
附加（数据行2总购买量）；
生成器。追加（“”）；
生成器。追加（“”）；
builder.Append（puRec.PurchasesMonth1）；
生成器。追加（“”）；
. . .

它显示在我的桌面浏览器（Chrome）上，如下所示：

不过，在一个更为宽泛的设备（平板电脑或egads！、手机）上，如果长宽比保持不变，或者我应该说，如果每一行在一行上重新组合，用户需要一个放大镜来读取数据

我认为如果把数据分成多行，就很难看到。哦，如果只是缩小，在一个小设备上就很难看到

有没有一种方法可以增强这样一个表，使它既保持语义的清晰性，又保持视觉的易读性

在html页面中包含引导css和js文件

将

class=“table”

添加到您的

表中

使用

class=“table responsive”

在小屏幕上查看时，可从具有滚动条的表格中获益 装置

---

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

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