c# - 我怎样才能 Bootstrap 一个列不应被分解的表？

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) 上显示如下:

但是，在更小的设备上(平板电脑或手机)，如果保留纵横比，用户将需要放大镜来读取数据 - 或者我应该说，如果每一行都保持在一行上.

我认为如果分成多行，数据将很难理解。 OTOH，如果只是缩小的话，很难在微不足道的设备上看到。

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

Answer 1

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