@jupyterlab/ui-components/style/table.css

JupyterLab - UI components written in React

/*-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------*/

.jp-sortable-table {
  color: var(--jp-ui-font-color1);
  background: var(--jp-layout-color1);
  font-size: var(--jp-ui-font-size1);
  border-spacing: 0;

  /* required to preserve borders of `<th>` when using position:sticky */
  border-collapse: separate;
  width: 100%;
  overflow-wrap: break-word;
}

.jp-sortable-table > thead {
  box-shadow: var(--jp-toolbar-box-shadow);

  /* move to a new stacking context to exclude from `mix-blend-mode` */
  z-index: 1;
}

.jp-sortable-table > tbody {
  overflow-y: auto;
  overflow-x: hidden;
}

.jp-sortable-table-tr > th,
.jp-sortable-table-tr > td {
  position: relative;
  padding: 4px 12px 2px;
  height: 18px;
}

.jp-sortable-table-tr > td::before,
.jp-sortable-table-tr > th::before {
  border-left: var(--jp-border-width) solid var(--jp-border-color3);

  /* border is implemented via pseudo-element to enable selective blending */
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  /* this serves to boost border color when background changes on hover */
  mix-blend-mode: multiply;
}

.jp-sortable-table-tr > th {
  font-weight: 500;
  text-align: left;
  border-width: var(--jp-border-width) 0;
  margin-top: calc(var(--jp-border-width) * -1);
  border-style: solid;
  border-color: var(--jp-border-color1);
  background: var(--jp-layout-color1);
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
  user-select: none;
}

.jp-sortable-table-tr > th:not(:first-child) {
  border-left-color: var(--jp-border-color2);
}

.jp-sortable-table-tr > th:hover {
  background: var(--jp-layout-color2);
}

.jp-sortable-table-tr:hover {
  background: var(--jp-layout-color2);
}

.jp-sortable-table-th-wrapper {
  flex-direction: row;
  display: flex;
}

.jp-sortable-table-th-wrapper > label {
  flex: 1;
  text-overflow: ellipsis;
}

.jp-sort-icon {
  flex: 0;
  height: var(--jp-ui-font-size1);
  width: var(--jp-ui-font-size1);
}

.jp-sort-icon > svg {
  display: inline;
  height: auto;
}

.jp-sortable-table-tr > th:not(.jp-sorted-header) .jp-sort-icon {
  opacity: 0;
}

.jp-sortable-table-tr > th:not(.jp-sorted-header):hover .jp-sort-icon {
  opacity: 0.5;
}