Html table 滚动条

<table style="width: 100%; border-collapse: collapse; border-color: rgb(211, 214, 219); color: black;"><thead style="background-color: rgb(248, 248, 248);"><tr style="border-color: rgb(211, 214, 219);"><th style="width: 30px; text-align: center;"><input type="checkbox" id="ftSelAll" value="All"></th><th style="font-size: 12px; text-align: left;">N</th><th style="font-size: 12px; text-align: left;">Quarter</th><th style="font-size: 12px; text-align: left;">Month</th><th style="font-size: 12px;">Count of N</th></tr></thead><tbody style="height: 201px;"><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA123" name="chxnameAAA123" value="AAA123"></td><td style="font-size: 12px;">AAA123</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA124" name="chxnameAAA124" value="AAA124"></td><td style="font-size: 12px;">AAA124</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA125" name="chxnameAAA125" value="AAA125"></td><td style="font-size: 12px;">AAA125</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA126" name="chxnameAAA126" value="AAA126"></td><td style="font-size: 12px;">AAA126</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA127" name="chxnameAAA127" value="AAA127"></td><td style="font-size: 12px;">AAA127</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA128" name="chxnameAAA128" value="AAA128"></td><td style="font-size: 12px;">AAA128</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA129" name="chxnameAAA129" value="AAA129"></td><td style="font-size: 12px;">AAA129</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA130" name="chxnameAAA130" value="AAA130"></td><td style="font-size: 12px;">AAA130</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA131" name="chxnameAAA131" value="AAA131"></td><td style="font-size: 12px;">AAA131</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA132" name="chxnameAAA132" value="AAA132"></td><td style="font-size: 12px;">AAA132</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA133" name="chxnameAAA133" value="AAA133"></td><td style="font-size: 12px;">AAA133</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA134" name="chxnameAAA134" value="AAA134"></td><td style="font-size: 12px;">AAA134</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA135" name="chxnameAAA135" value="AAA135"></td><td style="font-size: 12px;">AAA135</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA136" name="chxnameAAA136" value="AAA136"></td><td style="font-size: 12px;">AAA136</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA137" name="chxnameAAA137" value="AAA137"></td><td style="font-size: 12px;">AAA137</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA138" name="chxnameAAA138" value="AAA138"></td><td style="font-size: 12px;">AAA138</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA139" name="chxnameAAA139" value="AAA139"></td><td style="font-size: 12px;">AAA139</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA140" name="chxnameAAA140" value="AAA140"></td><td style="font-size: 12px;">AAA140</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA141" name="chxnameAAA141" value="AAA141"></td><td style="font-size: 12px;">AAA141</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA142" name="chxnameAAA142" value="AAA142"></td><td style="font-size: 12px;">AAA142</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA143" name="chxnameAAA143" value="AAA143"></td><td style="font-size: 12px;">AAA143</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr><tr style="border-color: rgb(211, 214, 219); background-color: white;"><td style="width: 30px; text-align: center;"><input type="checkbox" id="chxidAAA144" name="chxnameAAA144" value="AAA144"></td><td style="font-size: 12px;">AAA144</td><td style="font-size: 12px;">Qtr 1</td><td style="font-size: 12px;">January</td><td style="font-size: 12px; text-align: right; padding-right: 10px;">1</td></tr></tbody></table>

table tbody {
    display   : block;
    overflow-y: auto;
}

table thead,
tbody tr {
    display     : table;
    width       : 100%;
    table-layout: fixed;
}

table thead {
    width: calc(100%)
}

table tbody::-webkit-scrollbar {
    width: 3px;
}

table tbody::-webkit-scrollbar-thumb {
    background-color: rgb(193, 193, 193);
    border-radius   : 5px;
}

table tbody::-webkit-scrollbar-track {
    background-color: rgb(241, 241, 241);
}

table tbody::-webkit-scrollbar-thumb:hover {
    background-color: rgb(193, 193, 193);
}

table tbody::-webkit-scrollbar-thumb:active {
    background-color: rgb(193, 193, 193);
}