Html 为具有未知行数和列数的表生成固定表标题

所以我正在制作一个MVC应用程序，在其中我从数据库中获取信息。对于一个表可以有多少行和多少列以及该表可以放在中间的某个位置没有限制，web应用程序是响应的。以下是我的表格生成代码：

@model Dto.Table
@{
    var model = ViewContext.ViewData.Model as Dto.BaseModel;
    if (!model.IsPartial)
    {
        Layout = "~/Views/Shared/_PageMainLayout.cshtml";
    }
    else
    {
        Layout = null;
    }
}

<div id="page-wrapper">
    <div class="container-fluid">

        <div class="table-hover" style="overflow-x:auto">
            <table class="table table-bordered table-responsive table-hover">
                <thead>
                    <tr>
                        @foreach (var item in Model.Columns)
                        {
                            <th>@item</th>
                        }
                    </tr>
                </thead>
                @foreach(var row in Model.Rows)
                {
                    <tr>
                        @foreach(var columnValue in row.Values)
                        {
                            <td>@columnValue</td>
                        }
                    </tr>
                }

            </table>

        </div>     
    </div>
</div>

这就是它的样子

---

在twitter引导中，表的响应中心用于跨越类。如果使用引导，则使用col-md（col-md-1到12）

例如：

   <div class="row">
       <div class="span4"></div>
       <div class="span4">
        <table> your table</table>
      </div>
      <div class="span4"></div>
  </div>

你的桌子

我添加了虚拟数据。希望它能帮助你，如果你是表滚动

表格{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
泰德{
背景：#1ABC9C；
颜色：白色；
}
th，td{
填充：5px0；
边框：1px实心#dddddd；
文本对齐：左对齐；
填充：8px；
}
thead，tbody tr{
显示：表格；
宽度：100%；
表布局：固定；
}
t车身{
显示：块；
最大高度：200px；
溢出x：隐藏；
溢出y：滚动；
}

单位
接触
国家
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利
阿尔弗雷德·福特基斯特
玛丽亚·安德斯
德国
莫特祖马商业中心
张锦松
墨西哥
恩斯特·汉德尔
罗兰·孟德尔
奥地利
岛屿贸易
海伦·贝内特
英国
笑巴克斯酒窖
田纳西
加拿大
马加兹尼营养不良
乔瓦尼·罗维利
意大利
你使用过COL-MD 12N行意味着你计划进行页面滚动或表格滚动？@ PrabHaKLAN页面滚动，但我可能会把它拖到表SCROLLIN设置中间的表不是你的评论给出的问题，我需要的，我感谢的女巫，然而，有时数据太多，表格会失真。请看我的帖子中的图片，在页眉末端有一个大约15px（滚动条的宽度）的空ydiv。这种失真是由于滚动条引起的。如果数据小于表格高度，请小心删除空div或设置滚动条的样式。从您的编码来看，您似乎正在使用引导，请在任何引导中检查可能的解决方案。谢谢，我会尝试一下。是的，我正在使用引导，但我还没有找到任何东西
   <div class="row">
       <div class="span4"></div>
       <div class="span4">
        <table> your table</table>
      </div>
      <div class="span4"></div>
  </div>