CSS table adaptive + scrollbar

.table-container{width: 100%;overflow-y: auto;_overflow: auto;margin: 0 0 1em;}
.table-container table{border:0; border-collapse:collapse;}
.table-container table td,table th{border:1px solid #eee; padding:.5em 1em}
.table-container::-webkit-scrollbar{-webkit-appearance: none;width: 14px;height: 14px;}
.table-container::-webkit-scrollbar-thumb{border-radius: 8px;border: 3px solid #fff;background-color: rgba(0, 0, 0, .3);}

HTML code 

<div class="table-container">
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
         .
         .
         .
         .
         <tr>
            ....
         </tr>
    </table>

 A scroll bar is added at the bottom of the table beyond the screen, and the entire table can be displayed by dragging.

 

 

Guess you like

Origin blog.csdn.net/qq_22243075/article/details/131803726