效果圖

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"><Inputplaceholder="搜索..."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><ReactTabledata={tableData.map((data, i) => {const index = i;return {...data,index,}})}filterabledefaultFilterMethod={(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; }

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的好看的表格样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。