美文网首页
css 实现表格最后一列固定,前面超出部分滚动

css 实现表格最后一列固定,前面超出部分滚动

作者: 不要面包要蛋糕 | 来源:发表于2020-04-01 15:27 被阅读0次

    嗯,最后一列操作列固定,一个小实现

        .table-container{ // table 外层
              width: 100%;
              overflow-x: scroll;
        }
        .table{
              td{
                    word-break: keep-all;
                    white-space: nowrap;
                }
                tr{
                    position: relative;
                    td:last-child{
                        position: absolute;
                        right: 0;
                        z-index: 2;
                        background: #fff;
                        width: 320px;
                        // bottom: 0;  一定不能设置bottom,设置之后都堆到一起去了。我也不知道为什么,明明设置了 tr 的 position: relative。麻烦知道的大佬可以解答一下。
                    }
                    td:nth-last-child(2){
                        padding-right: 320px;
                    }
                }
            }
    

    嗯,以上。有个问题是,如果中间有一列不止一行,最后一列的高度就会变。这是一个老项目,用的 jq。我采取的方式是:取到最后一列的前面任意一列的高度,遍历赋给最后一列,再把行高对应设置。这样就最后一列高度和前面一样且文字上下居中。

    相关文章

      网友评论

          本文标题:css 实现表格最后一列固定,前面超出部分滚动

          本文链接:https://www.haomeiwen.com/subject/nohauhtx.html