自制Table錶格

效果圖

JS

import {
     useState, } from 'react';
import styles from './style.less'

const data = [
    {
     name: '胡樂樂', key: 1, age: 19, value: '你的努力真讓人可笑', operating: '哈哈哈哈' },
    {
     name: '少主', key: 2, age: 129, value: '嘿嘿嘿', operating: '哈哈哈哈' },
    {
     name: '郭帥', key: 3, age: 9, value: '胖肚腩', operating: '哈哈哈哈' },
    {
     name: '關羽', key: 4, age: 31, value: '我二弟天下第一', operating: '哈哈哈哈' },
    {
     name: '陳笑豪', key: 5, age: 22, value: '高材生', operating: '哈哈哈哈' }
]
const index = () =>
{
    
    const [active, setActive] = useState(null)
    const handleMouse = (flag) =>
    {
    
        return () =>
        {
    
            console.log(flag);
            setActive(flag)
        }
    }
    return (
        <div className={
    styles.wrapper}>
            <div className={
    styles.spin_nested_loading}>
                <div className={
    styles.container}>
                    <div id='cyclicScroll' className={
    `${
      styles.table}`} >
                        <div className={
    styles.table_container}>
                            <div className={
    styles.table_content}>
                                <table style={
    {
     tableLayout: 'auto' }}>
                                    <colgroup></colgroup>
                                    <thead className={
    styles.table_thead}>
                                        <tr>
                                            <th className={
    styles.table_cell}>姓名</th>
                                            <th className={
    styles.table_cell}>年齡</th>
                                            <th className={
    styles.table_cell}>地址</th>
                                            <th className={
    styles.table_cell}>詳情</th>
                                            <th className={
    styles.table_cell}>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody className={
    styles.table_tbody}>
                                        {
    data.map((data, index) => (
                                            <tr key={
    index} onMouseEnter={
    handleMouse(data.key)}
                                                onMouseLeave={
    handleMouse(false)} className={
    `${
      styles.tbody_row} ${
      styles.tbody_rowLevel_0}`}>
                                                <td className={
    `${
      styles.table_cell} ${
      data.key === active && styles.tbody_rowHover}`}><a>{
    data.name}</a></td>
                                                <td className={
    `${
      styles.table_cell} ${
      data.key === active && styles.tbody_rowHover}`}>{
    data.age}</td>
                                                <td className={
    `${
      styles.table_cell} ${
      data.key === active && styles.tbody_rowHover}`}>{
    data.value}</td>
                                                <td className={
    `${
      styles.table_cell} ${
      data.key === active && styles.tbody_rowHover}`}>
                                                    <span className={
    `${
      styles.tag} ${
      styles.tag_green}`} >Nice</span><span className={
    `${
      styles.tag} ${
      styles.tag_volcano}`} >Nice</span>
                                                </td>
                                                <td className={
    `${
      styles.table_cell} ${
      data.key === active && styles.tbody_rowHover}`}>
                                                    <div style={
    {
     gap: '16px' }} className={
    `${
      styles.space} ${
      styles.horizontal} ${
      styles.center}`} >
                                                        <div className={
    styles.item}>
                                                            <a >查看</a>
                                                        </div>
                                                        <div className={
    styles.item}>
                                                            <a >删除</a>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        ))}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    );
};
export default index

CSS

.wrapper {
    
  clear: both;
  max-width: 100%;

  &::after {
    
    display: table;
    clear: both;
    content: '';
  }

  &::before {
    
    display: table;
    content: '';
  }

  .spin_nested_loading {
    
    position: relative;
  }

  :focus-visible {
    
    outline: -webkit-focus-ring-color auto 1px;
  }
}

.container {
    
  position: relative;
  transition: opacity 0.3s;

  .table {
    
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0.85);
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: 'tnum', "tnum";
    position: relative;
    font-size: 14px;
    background: #fff;
    border-radius: 2px;

    table {
    
      width: 100%;
      text-align: left;
      border-radius: 2px 2px 0 0;
      border-collapse: separate;
      border-spacing: 0;

      .table_thead tr th, .table_tbody tr td {
    
        position: relative;
        padding: 16px 16px;
        overflow-wrap: break-word;
      }


      .table_thead {
    
        tr:first-child th:first-child {
    
          border-top-left-radius: 2px;
        }

        tr:last-child th:last-child {
    
          border-top-right-radius: 2px;
        }
      }

      tr th {
    
        position: relative;
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        text-align: left;
        background: #fafafa;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.3s ease;

        // 全選並且排出最後一個 &:not(:last-child)::before {
    
          position: absolute;
          top: 50%;
          right: 0;
          width: 1px;
          height: 1.6em;
          background-color: rgba(0, 0, 0, 0.06);
          transform: translateY(-50%);
          transition: background-color 0.3s;
          content: '';
        }
      }

      .table_tbody {
    


        tr td {
    
          border-bottom: 1px solid #f0f0f0;
          transition: background .3s;

          .tag {
    
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5715;
            list-style: none;
            font-feature-settings: 'tnum', "tnum";
            display: inline-block;
            height: auto;
            margin-right: 8px;
            padding: 0 7px;
            font-size: 12px;
            line-height: 20px;
            white-space: nowrap;
            background: #fafafa;
            border: 1px solid #d9d9d9;
            border-radius: 2px;
            opacity: 1;
            transition: all 0.3s;
          }

          .tag_green {
    
            color: #389e0d;
            background: #f6ffed;
            border-color: #b7eb8f;
          }

          .tag_volcano {
    
            color: #d4380d;
            background: #fff2e8;
            border-color: #ffbb96;
          }

          .space {
    
            display: inline-flex;
          }

          .center {
    
            align-items: center;
          }
        }

        .tbody_rowHover {
    
          background: #fafafa;
        }
      }
    }
  }


  &::after {
    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none \9;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    transition: all 0.3s;
    content: '321';
    pointer-events: none;
  }

  .table_container {
    
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;

    &::after, &::before {
    
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      width: 30px;
      transition: box-shadow 0.3s;
      content: '';
      pointer-events: none;
    }
  }
}