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

2020-04-01  本文已影响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。我采取的方式是:取到最后一列的前面任意一列的高度,遍历赋给最后一列,再把行高对应设置。这样就最后一列高度和前面一样且文字上下居中。

上一篇下一篇

猜你喜欢

热点阅读