datatables.net-fixedcolumns-se/css/fixedColumns.semanticui.css

FixedColumns for DataTables with styling for [SemanticUI](https://semantic-ui.com/)

table.dataTable thead tr > .dtfc-fixed-start,
table.dataTable thead tr > .dtfc-fixed-end,
table.dataTable tfoot tr > .dtfc-fixed-start,
table.dataTable tfoot tr > .dtfc-fixed-end {
  top: 0;
  bottom: 0;
  z-index: 3;
  background-color: #f9fafb;
}
table.dataTable tbody tr > .dtfc-fixed-start,
table.dataTable tbody tr > .dtfc-fixed-end {
  z-index: 1;
  background-color: white;
}
table.dataTable tr > .dtfc-fixed-left::after,
table.dataTable tr > .dtfc-fixed-right::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  transition: box-shadow 0.3s;
  content: "";
  pointer-events: none;
}
table.dataTable tr > .dtfc-fixed-left::after {
  right: 0;
  transform: translateX(100%);
}
table.dataTable tr > .dtfc-fixed-right::after {
  left: 0;
  transform: translateX(-80%);
}
table.dataTable.dtfc-scrolling-left tr > .dtfc-fixed-left::after {
  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.2);
}
table.dataTable.dtfc-scrolling-right tr > .dtfc-fixed-right::after {
  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.2);
}
table.dataTable.dtfc-scrolling-right tr > .dtfc-fixed-right + .dtfc-fixed-right::after {
  box-shadow: none;
}

div.dt-scroll,
div.dtfh-floatingparent {
  position: relative;
}
div.dt-scroll div.dtfc-top-blocker,
div.dt-scroll div.dtfc-bottom-blocker,
div.dtfh-floatingparent div.dtfc-top-blocker,
div.dtfh-floatingparent div.dtfc-bottom-blocker {
  position: absolute;
  background-color: #f9fafb;
}

html.dark table.dataTable thead tr > .dtfc-fixed-start,
html.dark table.dataTable thead tr > .dtfc-fixed-end,
html.dark table.dataTable tfoot tr > .dtfc-fixed-start,
html.dark table.dataTable tfoot tr > .dtfc-fixed-end {
  background-color: var(--dt-html-background);
}
html.dark table.dataTable tbody tr > .dtfc-fixed-start,
html.dark table.dataTable tbody tr > .dtfc-fixed-end {
  background-color: var(--dt-html-background);
}
html.dark table.dataTable.dtfc-scrolling-left tbody > tr > .dtfc-fixed-left::after {
  box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.3);
}
html.dark table.dataTable.dtfc-scrolling-right tbody > tr > .dtfc-fixed-right::after {
  box-shadow: inset -10px 0 8px -8px rgba(0, 0, 0, 0.3);
}
html.dark table.dataTable.dtfc-scrolling-right tbody > tr > .dtfc-fixed-right + .dtfc-fixed-right::after {
  box-shadow: none;
}
html.dark div.dtfc-top-blocker,
html.dark div.dtfc-bottom-blocker {
  background-color: var(--dt-html-background);
}

table.dataTable {
  border-left: none !important;
  border-right: none !important;
}
table.dataTable tr {
  border-left-width: 0px;
}
table.dataTable tr th:first-child,
table.dataTable tr td:first-child {
  border-left: 1px solid rgba(34, 36, 38, 0.15) !important;
}
table.dataTable tr th:last-child,
table.dataTable tr td:last-child {
  border-right: 1px solid rgba(34, 36, 38, 0.15);
}

div.dtfc-top-blocker {
  border-bottom: none !important;
}

tr.dt-rowReorder-moving td.dtfc-fixed-start,
tr.dt-rowReorder-moving td.dtfc-fixed-end {
  border-top: 2px solid #888 !important;
  border-bottom: 2px solid #888 !important;
}
tr.dt-rowReorder-moving td.dtfc-fixed-start:first-child {
  border-left: 2px solid #888 !important;
}
tr.dt-rowReorder-moving td.dtfc-fixed-end:last-child {
  border-right: 2px solid #888 !important;
}