为具有未知行数和列数的表创建固定表头

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 collumnValue in row.Values)
                        {
                            <td>@collumnValue</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

我添加了虚拟数据。希望如果您要去桌面滚动

，这会有所帮助

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你有用于跨越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>