JSFiddle - React, Tailwind, and code Playground
by justinwinter
CSS
.fixed-table-container .bs-checkbox,
.fixed-table-container .no-records-found {
text-align: center
}
.fixed-table-body thead th .th-inner,
.table td,
.table th {
box-sizing: border-box
}
.bootstrap-table .table {
margin-bottom: 0 !important;
border-bottom: 1px solid #ddd;
border-collapse: collapse !important;
border-radius: 1px
}
.bootstrap-table .table:not(.table-condensed),
.bootstrap-table .table:not(.table-condensed)>tbody>tr>td,
.bootstrap-table .table:not(.table-condensed)>tbody>tr>th,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>td,
.bootstrap-table .table:not(.table-condensed)>tfoot>tr>th,
.bootstrap-table .table:not(.table-condensed)>thead>tr>td {
padding: 8px
}
.bootstrap-table .table.table-no-bordered>tbody>tr>td,
.bootstrap-table .table.table-no-bordered>thead>tr>th {
border-right: 2px solid transparent
}
.fixed-table-container {
position: relative;
clear: both;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px
}
.fixed-table-container.table-no-bordered {
border: 1px solid transparent
}
.fixed-table-footer,
.fixed-table-header {
overflow: hidden
}
.fixed-table-footer {
border-top: 1px solid #ddd
}
.fixed-table-body {
overflow-x: auto;
overflow-y: auto;
height: 100%
}
.fixed-table-container table {
width: 100%
}
.fixed-table-container thead th {
height: 0;
padding: 0;
margin: 0;
border-left: 1px solid #ddd
}
.fixed-table-container thead th:focus {
outline: transparent solid 0
}
.fixed-table-container thead th:first-child {
border-left: none;
border-top-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topleft: 4px
}
.fixed-table-container tbody td .th-inner,
.fixed-table-container thead th .th-inner {
padding: 8px;
line-height: 24px;
vertical-align: top;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.fixed-table-container thead th .sortable {
cursor: pointer;
...