css实现table表格行聚焦编辑其他行模糊效果代码-html代码-BFW代码库

css实现table表格行聚焦编辑其他行模糊效果代码

代码语言：html

所属分类：表格

代码描述：css实现table表格行聚焦编辑其他行模糊效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, demo;

@layer demo {
  :root {
    --accent: hsl(200 80% 50%);
    --border: color-mix(in oklch, canvas, canvasText 15%);
    --background: color-mix(in oklch, canvas, canvasText 2%);
    --head: light-dark(hsl(0 0% 98%), canvas);
    --selected: color-mix(in oklch, var(--accent), canvas 85%);
    --color: color-mix(in hsl, canvasText, #0000 50%);
    --hover-background: light-dark(hsl(0 0% 92%), hsl(0 0% 10%));
    --sibling-hover: red;
    --hover-color: green;
  }
  .members {
    background: light-dark(#fff, #000);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
  }
  table {
    font-size: 0.875rem;
    border-collapse: collapse;
    background: #0000;
    color: var(--color);
  }
  input {
    color: var(--color);
  }
  table:focus-within tbody tr:not(:focus-within) {
    filter: blur(4px) saturate(0.2);
    pointer-events: none;
    opacity: 0.5;
  }
  tr:focus-within {
    background: var(--selected);
    td,
    input {
      color: canvasText;
    }
  }
  thead {
    background: var(--head);
  }
  th,
  td:first-of-type {
    padding: 0.25rem 1rem;
  }
  :is(td, th) {
    height: 40px;
  }
  td {
    font-weight: 300;
  }
  tr {
    transition-property: filter, background, opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;

    &:not(:last-of-type) {
      border-bottom: 1px solid var(--head);
    }
  }

  table :is(td, th) {
    white-space: nowrap;
    font-weight: 400;
    font-size: 0.875rem;
  }
  table th {
    text-align: left;
    font-weight: 500;
    color: color-mix(in hsl.........完整代码请登录后点击上方下载按钮下载查看