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

尝试使用 DIV。然后，您可以使用以下内容：

对于容器：溢出：滚动；位置：固定；

冻结的 div: position: absolute;

设置顶部和左侧。

于 2013-06-05T22:45:13.953 回答
0

尝试使用position:fixed

或者

试试这个链接

如何创建具有固定/冻结左列和可滚动正文的 HTML 表格？

于 2012-11-29T07:39:04.193 回答
0 
td:nth-child(1){
position:fixed;}

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

或者您可以使用两个表而不是一个表，将第一列数据放在第一个表中，然后放在第二个表中

于 2012-11-29T06:55:35.187 回答