0

こんにちは、テーブルの最初の列を固定する必要があります。残りの列はスクロール可能にする必要があります。
ここにリンクがあります ここに画像の説明を入力

 .tblRpt td{ padding:4px; color:#777;}
.tblServerInfo{border-collapse: collapse; font-size:13px; margin-top:10px;}
.tblServerInfo th{ background:#ececec; border:1px solid #dcdcdc; padding:4px; text-shadow: 1px 1px 0px #fff; color:#666;border-collapse: collapse; line-height:30px; }
.tblServerInfo td{ border:1px solid #dcdcdc; line-height:20px; padding:4px; text-shadow: 1px 1px 0px #fff; color:#666;border-collapse: collapse; text-align:center; }    
.tblServerInfo .feature{ color:#333; font-size:14px;  line-height:30px;  font-weight:bold; padding-left:10px; text-align:left; text-shadow: 1px 1px 0px #fff;}
.tblServerInfo .featureBody{ color:#333; font-size:13px;  line-height:25px;  padding-left:10px; text-align:left; }
.tblServerInfo .rw{background:#f5f5f5;}

.tblClass {
            width: 600px;
            overflow-x:scroll;  
            margin-left:5em;
            overflow-y:visible;
            padding-bottom:1px;
        }   

/*--Tooltip Styles--*/
.tip_trigger{display:block; padding:6px;}
.tip {
    color: #333;
    background:#ffffff;
    border:1px solid #747474;
    display:none; /*--Hides by default--*/
    padding:10px;
    margin-left:-143px;

    text-align:left; line-height:16px;
    position:absolute;  z-index:1000;
    text-decoration:none;
    cursor:auto;
    -moz-box-shadow: 2px 2px 5px #a2a2a2;-webkit-box-shadow: 2px 2px 5px #a2a2a2;box-shadow: 2px 2px 5px #a2a2a2;
}  

<div class="fLeft tblClass" style="margin:10px 0px 0px 0px;">

                    <table class="tblServerInfo" width="100%">
                    <thead>
                        <tr>
                            <th class="headcol feature">
                                Server IP address
                            </th>
                            <th>
                               50.16.197.36
                            </th>
                            <th>
                                50.16.197.18
                            </th>
                            <th>
                                50.16.197.36
                            </th>
                            <th>
                                50.16.197.12
                            </th>
                            <th>
                                50.16.197.36
                            </th>
                            <th>
                                50.16.197.36
                            </th>
                            <th>
                                50.16.197.36
                            </th>
                            <th>
                                50.16.197.36
                            </th>
                            <th>
                                50.16.197.36
                            </th>
                            <th>
                                50.16.197.36
                            </th>
                            <th>
                                50.16.197.36
                            </th>
                            <th>
                                50.16.197.36
                            </th>


                        </tr>
                       </thead>
                       <tbody>
                        <tr style="background:#f5f5f5; line-height:40px;">
                            <td class="headcol feature" >Server Service</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="featureBody headcol">Api_Deletion</td>
                            <td></td>
                            <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td>
                            <td></td>
                            <td></td>
                           <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="featureBody headcol">Api_Deletion</td>
                            <td></td>
                            <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td>
                            <td></td>
                            <td></td>
                            <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td class="featureBody headcol">Api_Deletion</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>



                       </tbody>
                    </table>
4

3 に答える 3

0 
td:nth-child(1){
position:fixed;}

th:nth-child(1){
position:fixed;}

または、1つではなく2つのテーブルを使用して、最初の列のデータを最初のテーブルに配置し、残りを2番目のテーブルに配置することもできます。

于 2012-11-29T06:55:35.187 に答える
0

使ってみてposition:fixed

または

このリンクを試してください

左の列が固定/固定され、本文がスクロール可能な HTML テーブルを作成するにはどうすればよいですか?

于 2012-11-29T07:39:04.193 に答える
0

DIV を操作してみてください。次に、以下を利用できます。

コンテナーの場合: オーバーフロー: スクロール; 位置: 固定;

フリーズした div: position: absolute;

上と左も同様に設定します。

于 2013-06-05T22:45:13.953 に答える