Enhanced Candidate Table - Copy this Html, Bootstrap Component to your project
I want to make it more fantastic <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Candidate Table</title> <style> /* Base styling for the table */ table { width: 100%; border collapse: collapse; font family: Arial, sans serif; margin top: 20px; box shadow: 0px 8px 24px rgba(0, 0, 0, 0.15); border radius: 12px; overflow: hidden; } /* Header styling */ th, td { padding: 15px; text align: center; border: none; } th { background color: #4a7398; color: white; font weight: bold; font size: 16px; } /* Row and hover styling */ tr:nth child(even) { background color: #f3f5fa; } tr:hover { background color: #eaf1fc; transition: background color 0.3s ease; } /* Link styling for Candidate CV */ a { color: #0066cc; font weight: bold; text decoration: none; position: relative; transition: color 0.3s ease; } a:hover { color: #003d99; } /* Add underline effect on hover */ a::after { content: ''; width: 100%; height: 2px; background color: #0066cc; position: absolute; bottom: 2px; left: 0; transform: scaleX(0); transition: transform 0.3s ease; } a:hover::after { transform: scaleX(1); } </style> </head> <body> <table> <! Table Header > <tr> <th>Date Uploaded</th> <th>Candidate Profile ID</th> <th>Candidate Name</th> <th>Candidate CV</th> <th>Candidate Status</th> </tr> <! Table Rows > <tr> <td>Date (Auto)</td> <td>CH23156</td> <td>Maria K.</td> <td><a href="https://sites.google.com/d/13 a_nAgWBztHXULl7GhvyAvyayZReBWm/p/1XdEU5Kt8Uk6 ac z9CqjfuIDtQULXw0o/edit">Link</a></td> <td>Pending Review</td> </tr> <tr> <td>Date (Auto)</td> <td>CH23154</td> <td>Petros L.</td> <td><a href="#">Link</a></td> <td>Rejected</td> </tr> <tr> <td>Date (Auto)</td> <td>CH23151</td> <td>Eleni T.</td> <td><a href="#">Link</a></td> <td>In Progress</td> </tr> <tr> <td>Date (Auto)</td> <td>CH23150</td> <td>Stathis G.</td> <td><a href="#">Link</a></td> <td>Hired</td> </tr> </table> </body> </html>
