5

私は、HTML/CSS 流動幅、流動高、固定ヘッダー テーブルに取り組んできましたが、成功しませんでした。JavaScript または jQuery ソリューションを教えていただければ幸いです。

基準：

  1. テーブルはブラウザー ウィンドウの幅全体を占める必要があります (少なくともコンテナー)
  2. テーブルは、ブラウザー ウィンドウで使用可能なコンテナーの高さ全体を埋める必要があります
  3. すべての行に十分なスペースがない場合、tbody は y をスクロールする必要があります
  4. thead th 列と tbody td 列は整列する必要があります

純粋な HTML/CSS は失敗です。jQuery や JavaScript はどうですか?

ここにフィドルがあります：http://jsfiddle.net/JXWfC/6/

最終的には、IE7+、および最新バージョンの Chrome と FireFox で動作する必要があります。

私の基本的なページのマークアップは次のとおりです。

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

2 に答える 2

2

これは完全ではなく、Chrome 以外ではチェックされていませんが、正しい方向に進むことを願っています。

基本的なアプローチは、コンテナposition:relative;とthタグを allにすることposition:absolute;です。これには、正しい配置のためにかなりの余分なコードが必要ですが、ヘッダーを常に保持し、表のセルをスクロールさせるには適切な方法です。

別の方法として、ヘッダーをテーブルとは別の div にすることもできますが、列が整列するように幅を設定する必要があります。本当に一頭一頭の馬です。

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; }
于 2013-04-24T21:05:09.497 に答える
0

これはあなたが欲しいですか？ 実施例

<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>
于 2013-04-24T16:37:54.303 に答える