screen_rotation
Copied to Clipboard
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> const App = () => { const data = [ { id: 1, name: "John Doe", age: 25 }, { id: 2, name: "Jane Smith", age: 30 }, { id: 3, name: "Mark Johnson", age: 42 }, { id: 4, name: "Emily Davis", age: 29 }, { id: 5, name: "Michael Wilson", age: 35 }, { id: 6, name: "Sarah Thompson", age: 27 }, { id: 7, name: "David Anderson", age: 48 }, { id: 8, name: "Jessica Martinez", age: 33 }, { id: 9, name: "Christopher Taylor", age: 39 }, { id: 10, name: "Stephanie Thomas", age: 31 }, { id: 11, name: "Daniel Brown", age: 37 }, { id: 12, name: "Amanda Garcia", age: 26 }, { id: 13, name: "Robert Hernandez", age: 43 }, { id: 14, name: "Melissa Lewis", age: 34 }, { id: 15, name: "Matthew Clark", age: 41 }, { id: 16, name: "Ashley Walker", age: 28 }, { id: 17, name: "William Lewis", age: 36 }, { id: 18, name: "Jennifer Rodriguez", age: 32 }, { id: 19, name: "Andrew Wright", age: 38 }, { id: 20, name: "Lauren Young", age: 23 }, // ... add more entries here ]; return ( <div className="container"> <h1>React Js Sticky Table Example | fixed table header </h1> <div className="table-container"> <table className="sticky-table"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> {data.map((row) => ( <tr key={row.id}> <td>{row.id}</td> <td>{row.name}</td> <td>{row.age}</td> </tr> ))} </tbody> </table> </div> </div> ); }; ReactDOM.render(<App />, document.getElementById("app")); </script> <style> .container { text-align: center; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24); width: 600px; margin: 0 auto; padding: 20px; } .table-container { max-width: 1200px; margin: 0 auto; position: relative; height: 400px; overflow: auto; } /* Style table */ table { width: 100%; border-collapse: collapse; margin-bottom: 1em; } thead { position: sticky; top: 0; background-color: #fff; z-index: 1; } thead th { background-color: #f5f5f5; text-align: left; padding: 0.5em 1em; border-bottom: 1px solid #ddd; } tbody tr:nth-child(even) { background-color: #f9f9f9; } td { padding: 0.5em 1em; border-bottom: 1px solid #ddd; } td:first-child { font-weight: bold; } </style> </body> </html>