@rtdui/tailwind-plugin/src/data-table.css

tailwind plugin for Rtdui components

/** data-table 开始 **/

/* 先清除表格及所有行和单元格的边框, daisyUI中tr有默认边框, 下面会用伪元素模拟单元格边框 */
.data-table.table :where(tr, th, td) {
  border: none;
}

/*#region 边框 */
/* 最流行的表格和单元格边框绘制方法: 
 * 1. 设置table的border-collapse: separate, border-spacing: 0;
 * 2. 为table设置border-top和border-left为1px的边框
 * 3. 为th,td设置border-right和border-bottom为1px的边框
 * 这个方法当单元格为sticky时会存在问题: 
 * 1. 当表头行中单元格为sticky时, 在开始垂直滚动时会因为table顶部有1px的边框而发生抖动问题
 * 2. 当表列中单元格为sticky时, 在开始水平滚动时也会因为table左边有1px的边框而发生抖动问题
 * 解决1,2的问题需要使用额外的方式去控制单元格的top的值加上table的border-top, left的值加上table的border-left, 但加上以后在水平滚动时又会出现漏空的问题.

 * 因此, 最佳的解决方案是使用伪元素模拟单元格的边框
 */

/* 默认是非stick定位的单元格使用相对定位, 这是为了使用伪元素模拟边框 */
.data-table.table :where(th, td):not(.sticky) {
  position: relative;
}
/* 伪元素模拟单元格的右边框和底边框 */
.data-table.table:not(.no-border) :where(th, td)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-right: var(--borderWidth) solid var(--color-base-200);
  border-bottom: var(--borderWidth) solid var(--color-base-200);
  pointer-events: none;
}
/* 伪元素模拟表格的左边框 */
.data-table.table:not(.no-border)
  :where(th:first-child, td:first-child)::before {
  border-left: var(--borderWidth) solid var(--color-base-200);
}
/* 伪元素模拟表格的顶边框 */
.data-table.table thead > tr:first-child :where(th, td)::before {
  border-top: var(--borderWidth) solid var(--color-base-200);
}
/* 伪元素模拟表格的顶边框, 如果没有thead */
.data-table.table:not(.no-border):not(:has(thead))
  tbody
  > tr:first-child
  :where(th, td)::before {
  border-top: var(--borderWidth) solid var(--color-base-200);
}
/* 水平滚动时为最后的固定列的右边框添加提升特效 */
.data-table.table:not(.no-border) :where(th, td).elevation::before {
  border-right: calc(3 * var(--borderWidth)) solid var(--color-base-200);
}
/* 为表头的最后一行添加分隔特效 */
.data-table.table thead tr:last-child :where(th, td)::before {
  border-bottom: calc(2 * var(--borderWidth)) solid var(--color-base-200);
}
/*#endregion 边框 */

/* 为所有单元格设置背景色, 如果不设置在滚动时非sticky的单元格会显示在sticky的下面, 副作用是无法再为tr设置背景色 */
.data-table.table :where(th, td) {
  background-color: var(--color-base-100);
}

/* 表脚中的单元格使用另外的背景色 */
.data-table.table tfoot :where(th, td) {
  background-color: var(--color-base-200);
}

/* 拖拉列头调整列序时的过渡效果 */
.data-table.table thead :where(th, td) {
  transition: transform 0.2s ease-in-out;
}

/* 为有错误的单元格设置轮廓 */
.data-table.table :where(th, td).error {
  outline: 1px solid red;
  outline-offset: -4px;
}

/* 行选中时的单元格背景色,不能直接设置tr的背景色,因为td有背景色,它会覆盖在tr之上 */
.data-table.table tr.selected td {
  @apply bg-base-300;
}

/* 行激活时的单元格背景色,不能直接设置tr的背景色,因为td有背景色,它会覆盖在tr之上
 * 行激活只在多选时有用, 单选时直接使用行选择, 与行点击选择的区别是单选行可以反选, 而激活行不能反激活.
 * 为防止与行点击单选的样式冲突, 没有为激活行设置默认样式, 开发者可以在多选时手动为激活的行设置样式. 如:
 * 方式1: 通过CSS样式
  .data-table.table tr.actived td {
     @apply bg-info text-info-content;
   }
 * 方式2: 通过DataTable组件的className属性设置
  <DataTable
    className="[&&_tr.actived_td]:bg-info [&&_tr.actived_td]:text-info-content"
  />
 */
/* 

/* 列宽调整指示器 */
.resizer {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  height: 100%;
  width: 6px;
  background: var(--color-base-300);
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  opacity: 0;
}

.resizer.resizing {
  background: var(--color-info);
  opacity: 1;
}

:hover.resizer {
  opacity: 1;
}

/* 单元格中的编辑控件 */
.data-table.table td .select {
  background-image: unset;
  font-weight: inherit;
  font-size: inherit;
  padding-left: 0.25rem;
  padding-right: 0.5rem;
  background-position:
    calc(100% - 8px) calc(1px + 50%),
    calc(100% - 4px) calc(1px + 50%);
}

.data-table.table td .input {
  font-weight: inherit;
  font-size: inherit;
}

.data-table.table td .select:focus {
  background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
    linear-gradient(135deg, currentcolor 50%, transparent 50%);
}

/* css 长列表性能优化, 只支持Chrome 和 Microsoft Edge v85+ */
.data-table.table tbody td {
  content-visibility: auto;
  contain-intrinsic-size: auto 36px;
}

/** data-table 结束 **/