Come posso creare una larghezza del fluido, un'altezza del fluido, una tabella di intestazione fissa con jQuery?

Question

Ho lavorato per una tabella di intestazione fissa con altezza del fluido, altezza del fluido, HTML/CSS senza successo. Spero che tu possa indicarmi una soluzione JavaScript o jQuery.

Criteri:

1. tabella deve riempire tutta la larghezza della finestra del browser (almeno contenitore)
2. tabella deve riempire tutta l'altezza del contenitore disponibili nella finestra del browser
3. tbody deve scorrere y se non c'è abbastanza spazio per tutte le righe
4. thead ° e tbody td colonne devono allinearsi

puro HTML/CSS è un busto. Che ne dici di jQuery o JavaScript?

Ecco un violino: http://jsfiddle.net/JXWfC/6/

In definitiva si avrà bisogno di lavorare su IE7 +, e le versioni moderne di Chrome e Firefox.

Ecco alcuni marcatura della mia pagina di base:

<div class="container"> 
    <div class="sidebar"> 
     nav here 
    </div> 
    <div class="content"> 
     <table> 
      <thead> 
       <tr><th>column 1</th><th>2</th><th>three</th><th>this is column four</th></tr> 
      </thead> 
      <tbody> 
       <tr><td>data</td><td>can</td><td>have</td><td>different widths: not all the same</td></tr> 
       <tr><td>table</td><td>-</td><td>should</td><td>fill 100% width and 100% height</td></tr> 
       <tr><td>and</td><td>-</td><td>should</td><td>not require all td's to be same width</td></tr> 
       <tr><td>but</td><td>-</td><td>percentage</td><td>% widths are just fine</td></tr> 
       <tr><td>and</td><td>if</td><td>there's</td><td>too many rows, it should scroll y (overflow-y: scroll)</td></tr> 
       <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr> 
       <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr> 
       <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr> 
       <tr><td>sample</td><td>1</td><td>row</td><td>Lorem ipsum dolor sit amit.</td></tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

Answer 1

Questo non è completa e non è stata controllata in qualche cosa, ma Chrome, ma si spera che otterrà voi sulla strada giusta.

Fondamentalmente l'approccio è quello di rendere il contenitore position:relative; e i tag th tutti position:absolute;. Questo richiede un bel po 'di codice extra per il corretto posizionamento, ma è un metodo decente per far sì che l'intestazione rimanga sempre e le celle della tabella scorrano.

In alternativa è possibile rendere le intestazioni un div separato dal tavolo, ma sarà comunque necessario impostare le larghezze in modo che le colonne siano allineate. Un cavallo un pezzo, davvero.

http://jsfiddle.net/daCrosby/JXWfC/9/

<div id="hold"> 
    <div class="header"> 
     <h4>title goes here</h4> 
    </div> 
    <div class="container"> 
     <div class="sidebar">sidebar<br />nav<br />goes<br />here</div> 
     <div class="content" > 
      <table> 
       <thead> 
        <tr> 
         <th class="col1">column 1</th> 
         <th class="col2">2</th> 
         <th class="col3">three</th> 
         <th class="col4">this is column four</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td class="col1">data</td> 
         <td class="col2">can</td> 
         <td class="col3">have</td> 
         <td class="col4">different widths: not all the same</td> 
        </tr> 
       [ ... ] 

CSS

body{ 
    background:#000; 
} 
div { 
    display:inline-block; 
    vertical-align:top; 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
} 
#hold{ 
    display:block; 
    padding:40px 10px; 
    width:95%; 
    margin:auto; 
} 
.content table, 
.header, 
.container{ 
    width:100%; 
    max-height:100%; 
} 
.header { 
    background:darkgray; 
    color:white; 
    text-align:center; 
} 
.container { 
    background:lightgray; 
} 
.sidebar { 
    width:20%; 
    background:green; 
    color:white; 
    float:left; 
} 
.content { 
    width:80%; 
    position:relative; 
} 
h4 { 
    margin:0; 
} 
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
    background:red; 
    overflow-y:scroll; 
    height:300px; 
    display:block; 
} 
thead { 
    position:absolute; 
    top:1px; 
    left:0px; 
    right:0px; 
} 
tbody{ 
    padding:1.3em 0px 0px; 
    margin:0px; 
    display:block; 
} 
tr{ 
    width:100%; 
    display:block; 
    margin-top:-2px; 
} 
th { 
    background:#666; 
    color:#fff; 
    position:absolute; 
} 
td { 
    display:inline-block; 
    margin:0px; 
    padding:0px; 
    background:#ddd; 
} 
td.col2, 
td.col3, 
td.col4{ 
    margin-left:-4px; 
} 
.col1 { width:20%; } 
.col2 { width:10%; } 
.col3 { width:20%; } 
.col4 { width:50%; } 
th.col1 { left:0px; right:80%; } 
th.col2 { left:20%; right:70%; } 
th.col3 { left:30%; right:50%; } 
th.col4 { left:50%; right:0x; } 

Answer 2

E 'questo che vuoi? Working example

<div class="container" style="overflow:scroll;"> 
    <div class="sidebar">nav here</div> 
    <div class="content"> 
     <table> 
      <thead> 
       <tr> 
        <th width=25%>column 1</th> 
        <th width=25%>2</th> 
        <th width=25%>three</th> 
        <th width=25%>this is column four</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>data</td> 
        <td>can</td> 
        <td>have</td> 
        <td>different widths: not all the same</td> 
       </tr> 
       <tr> 
        <td>table</td> 
        <td>-</td> 
        <td>should</td> 
        <td>fill 100% width and 100% height</td> 
       </tr> 
       <tr> 
        <td>and</td> 
        <td>-</td> 
        <td>should</td> 
        <td>not require all td's to be same width</td> 
       </tr> 
       <tr> 
        <td>but</td> 
        <td>-</td> 
        <td>percentage</td> 
        <td>% widths are just fine</td> 
       </tr> 
       <tr> 
        <td>and</td> 
        <td>if</td> 
        <td>there's</td> 
        <td>too many rows, it should scroll y (overflow-y: scroll)</td> 
       </tr> 
       <tr> 
        <td>sample</td> 
        <td>1</td> 
        <td>row</td> 
        <td>Lorem ipsum dolor sit amit.</td> 
       </tr> 
       <tr> 
        <td>sample</td> 
        <td>1</td> 
        <td>row</td> 
        <td>Lorem ipsum dolor sit amit.</td> 
       </tr> 
       <tr> 
        <td>sample</td> 
        <td>1</td> 
        <td>row</td> 
        <td>Lorem ipsum dolor sit amit.</td> 
       </tr> 
       <tr> 
        <td>sample</td> 
        <td>1</td> 
        <td>row</td> 
        <td>Lorem ipsum dolor sit amit.</td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>