Question

大家好我需要冻结表格中的第一列。休息列应该是可滚动的。
这是link enter image description here

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

Answer 1

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

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

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

中

Answer 2

尝试使用position:fixed

或

试试此链接

how do I create an HTML table with fixed/frozen left column and scrollable body?

Answer 3

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

对于容器：溢出：滚动; 职位：固定;

冻结的div： position：absolute;

同样设置顶部和左侧。

需要修复表中的左列

3 个答案: