为具有未知数量的行和列的表制作固定表头

Question

所以我正在制作一个 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>

所以，我添加了一些 CSS 女巫建议：

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: auto;
}

thead {
    background: #1ABC9C;
    color: white;
}

th, td {
    padding: 5px 0;
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
} 

这就是它的外观

Answer 1

您有用于在 twitter bootstrap 中跨越类的表的响应中心。如果使用 bootstrap 然后使用 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>

Answer 2

我添加了虚拟数据。如果您要进行表格滚动，希望对您有所帮助

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

thead{
 	background:#1ABC9C;
  	color:white;
}

th,td{
   padding:5px 0;
   border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

thead, tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

tbody {
    display: block;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
}

<table>
<thead class="fixed">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr><tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr><tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  </tbody>
</table>