Erstellen einer festen Tabellenüberschrift für eine Tabelle mit einer unbekannten Anzahl von Zeilen und Spalten

Question

So mache ich eine MVC-Anwendung, in der ich Informationen aus einer Datenbank bekomme. Es gibt keine Beschränkung darauf, wie viele Zeilen und Spalten eine Tabelle haben kann und die Tabelle irgendwo in der Mitte platziert ist, und die Webanwendung reagiert darauf. Hier ist meine Tabellenerzeugungscode:

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

Also, ich habe hinzugefügt wurde einige CSS-Hexe vorgeschlagen:

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

Und das ist, wie es aussieht

Answer 1

Sie haben Responsive Zentrum der Tabelle verwendet, um die Klasse in twitter bootstrap.In Fall Bootstrap verwenden dann mit col-md (col-Md-1 bis 12)

für Beispiel:

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

Answer 2

Ich habe Dummy-Daten hinzugefügt. Hoffe, dass es hilft, wenn Sie für Tisch blättern

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

 
thead{ 
 
    \t background:#1ABC9C; 
 
    \t 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>