Table fixed header and scrollable body

前端 未结 29 1886
粉色の甜心
粉色の甜心 2020-11-22 05:33

I am trying to make a table with fixed header and a scrollable content using the bootstrap 3 table. Unfortunately the solutions I have found does not work with bootstrap or

29条回答
  •  情书的邮戳
    2020-11-22 05:43

    Late to the party (Story of my life), but since this is the first result on google, and none of the above got me working, here's my code

    /*Set a min width where your table start to look like crap*/
    table { min-width: 600px; }
    
    /*The next 3 sections make the magic happen*/
    thead, tbody tr {
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    
    tbody {
        display: block;
        max-height: 200px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    
    td {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /*Use the following to make sure cols align correctly*/
    table, tr, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
    
    
    /*Set your columns to where you want them to be, skip the one that you can have resize to any width*/
        th:nth-child(1), td:nth-child(1) {
        width: 85px;
    }
    th:nth-child(2), td:nth-child(2) {
        width: 150px;
    }
    th:nth-child(4), td:nth-child(4) {
        width: 125px;
    }
    th:nth-child(5) {
        width: 102px;
    }
    td:nth-child(5) {
        width: 85px;
    }
    

提交回复
热议问题