Сначала я попробовал принятый ответ г-на Грина, но я обнаружил, что мои столбцы не выровнены, что float: left кажется очень подозрительным. Когда я перешел от scollbar к полосе прокрутки - мое тело таблицы сдвинуло несколько пикселей, и я потерял выравнивание.
CODE PEN https://codepen.io/majorp/pen/gjrRMx
CSS
.width50px {
width: 100px !important;
}
.width100px {
width: 100px !important;
}
.fixed_headers {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
th {
padding: 5px;
text-align: left;
font-weight:bold;
height:50px;
}
td {
padding: 5px;
text-align: left;
}
thead, tr
{
display: block;
position: relative;
}
tbody {
display: block;
overflow: auto;
width: 100%;
height: 500px;
}
.tableColumnHeader {
height: 50px;
font-weight: bold;
}
.lime {
background-color: lime;
}