好看的表格样式

傷城~ 2022-12-30 08:26 169阅读 0赞

效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

import React, { Component } from "react";
    import ReactTable from 'react-table-6'
    import { Input } from 'antd';
    import "antd/dist/antd.css";
    import { SearchOutlined } from '@ant-design/icons';
    import 'react-table-6/react-table.css'
    import "./App.css"
    const tableData = [
      { id: "1", value: "test1" },
      { id: "2", value: "test2" },
      { id: "3", value: "test3" },
      { id: "4", value: "test4" },
      { id: "5", value: "test5" },
      { id: "6", value: "test6" }
    ]
    class App extends Component {
      render() {
        return (
          <div className="container">
            <Input
              placeholder="搜索..."
              className="bottom_table_input"
              suffix={
                <SearchOutlined className="bottom_table_input_icon" />
              }
            />
            <button className="Mozilla_Buttons">Mozilla-Style Buttons</button>
            <div className="border_table_box">
              <div className="border_table border_table_left_top"></div>
              <div className="border_table border_table_right_top"></div>
              <div className="border_table border_table_left_bottom"></div>
              <div className="border_table border_table_right_bottom"></div>
              <ReactTable
                data={tableData.map((data, i) => {
                  const index = i;
                  return {
                    ...data,
                    index,
                  }
                })}
                filterable
                defaultFilterMethod={(filter, row) =>
                  String(row[filter.id]) === filter.value
                }
                columns={[
                  {
                    Header: "test",
                    accessor: "id",
                  }
                ]}
                defaultPageSize={20}
                className="details_table_container"
                minRows={0}
                row
              />
            </div>
          </div>
        );
      }
    }
    export default App;

.container{padding: 15px;}
    .details_table_container{
      background-color: rgb(11, 24, 74);
      margin-top: 10px;padding: 15px;
      border: 0px!important;
      color: #fff!important;
      text-align: center;
    }
    .border_table_box{position: relative;padding: 15px;}
    .border_table{position: absolute;
    	width: 20px;
    	height: 20px;
    }
    .border_table_left_top{top: 0;
    	left: 0;
    	border-left: 1px solid #2f7f9d;
    	border-top: 1px solid #2f7f9d;
    }
    .border_table_right_top{top: 0;
    	right: -2px;
    	border-right: 1px solid #2f7f9d;
    	border-top: 1px solid #2f7f9d;
    }
    .border_table_left_bottom{bottom: 0;
    	left: 0;
    	border-bottom: 1px solid #2f7f9d;
    	border-left: 1px solid #2f7f9d;
    }
    .border_table_right_bottom{bottom: 0;
    	right: -2px;
    	border-right: 1px solid #2f7f9d;
    	border-bottom: 1px solid #2f7f9d;
    }
    .details_table_container .ReactTable .rt-table{ box-shadow: inset 0 0 5px 15px #044664; }
    .details_table_container .rt-resizable-header-content{ color: #00fffa;}
    .details_table_container .rt-table{box-shadow: inset 0 0 5px 15px #044664;padding: 15px;}
    /*（偶数行）*/
    .details_table_container .rt-tr-group:nth-child(even) {}
    /*（奇数行）*/
    .details_table_container .rt-tr-group:nth-child(odd) {background-image: linear-gradient(#044664,#0b184a,#044664);}
    .details_table_container .-pagination .-pageJump input,.details_table_container .-pagination input, .details_table_container .-pagination select{color: #000;}
    .bottom_table_input{
      height: 40px;
      margin-right: 10px;
      margin-bottom: 10px;
      box-shadow: inset 1px 0px 6px 1px #4988bc;
      border-radius: 16px;
      padding-left: 24px;
      border-image: linear-gradient( #4988bc, #00aeff) 0 0;
      width: 500px;
    }
    .details_table_container .-pagination .-btn{background-color: #fff;opacity: 1!important;}
    .bottom_table_input_icon{color: #425e9a;}
    .Mozilla_Buttons {
      width: 190px;
      text-align: center;
      text-indent: 0;
      height: 40px;
      background: linear-gradient(to bottom, #4eb5e5 0%,#389ed5 100%); /* W3C */
      border: none;
      border-radius: 5px;
      border-bottom: 4px solid #2b8bc6;
      color: #fbfbfb;
      font-weight: 600;
      font-family: 'Open Sans', sans-serif;
      text-shadow: 1px 1px 1px rgba(0,0,0,.4);
      font-size: 15px;
      box-shadow: 0px 3px 0px 0px rgba(0,0,0,.2);
      cursor: pointer;
      margin: 0 auto;
      position: absolute;
      right: 80px;
    }
    .Mozilla_Buttons:active {
      box-shadow: 0px 2px 0px 0px rgba(0,0,0,.2);
      top: 1px;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: /images/20221120/973527654322487f9cf73fcc35636aa3.png