.scrollable-table-container {
    padding-bottom: 20px;
}


.scrollable-table tr {
    border-bottom: 1px solid;
    display: table; /* display purpose; th's border */
    width: 100%;
    box-sizing: border-box; /* because of the border (Chrome needs this line, but not FF) */
}

.scrollable-table td {
    border-top: none;
    text-align: center;
    border-bottom: none;
    border-left: none;
}

.scrollable-table .scrollable-body {
    overflow-y: scroll;
    display: block;

    height: 100px;
}

.scrollable-table-container table {
    width: 100%;
}

.scrollable-table-container table, td {
    border-collapse: collapse;
    border: 1px solid #000;
}

.scrollable-table thead {
    display: table; /* to take the same width as tr */
    width: calc(100% - 17px); /* - 17px because of the scrollbar width */
}

.scrollable-table tbody {
    display: block; /* to enable vertical scrolling */
    max-height: 280px; /* e.g. */
    min-height: 280px; /* e.g. */
    overflow-y: scroll; /* keeps the scrollbar even if it doesn't need it; display purpose */
}

.scrollable-table th, td {
    width: 33.33%; /* to enable "word-break: break-all" */
    padding: 5px;
    word-break: break-all; /* 4. */
}