Add a border radius, grey scale color scheme, smoother effec

Add a border radius, grey scale color scheme, smoother effects, and a more compact design <style> /* Base body style for overall consistency and legibility */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern, clean font choice */ margin: 0; padding: 0; background-color: #f7f7f7; /* Soft background color for less strain on eyes */ } /* Main table style for centralized and modern appearance */ table { width: 100%; border-collapse: collapse; /* Borders between cells are collapsed into a single border */ background-color: #ffffff; /* Clean, neutral background for the content */ margin: 40px auto; /* Centered table with vertical spacing for better layout */ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for a slight 3D effect */ } /* General styling for all table cells for uniformity */ th, td { border: 1px solid #e1e1e1; /* Light grey border for subtlety */ padding: 12px 15px; /* Sufficient padding for content clarity */ text-align: left; /* Default alignment to the left */ font-size: 14px; /* Readable text size */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Ensures uniformity in font usage */ font-weight: normal; /* Default font weight for body content */ transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */ } /* Enhanced header style for better visibility and emphasis */ th { background-color: #0056b3; /* Prominent header color */ color: white; /* Contrasting text color for readability */ text-align: center; /* Centered text for a formal look */ font-size: 16px; /* Slightly larger font for emphasis */ padding: 15px 15px; /* Increased padding for a more spacious header */ } /* Style for even rows for better readability through striping */ tr:nth-child(even) { background-color: #fafafa; /* Very light grey for minimalistic zebra striping */ } /* Hover style for rows to enhance interactivity */ tr:hover { background-color: #f0f0f0; /* Light grey to highlight the row on hover */ } /* Link styling to match the overall color scheme */ a { color: #0056b3; /* Blue to match the header for consistency */ text-decoration: underline; /* Underline for clear identification as a link */ } /* Hover effect for links to indicate interactiveness */ a:hover { text-decoration: none; /* Removing underline on hover for a cleaner look */ color: #003975; /* Darker blue for visual feedback */ } /* Button styling within table for actions like 'view' */ .button { padding: 8px 16px; /* Adequate padding for clickable area */ background-color: #007bff; /* Bright, noticeable button color */ color: white; /* Text color for contrast and visibility */ border: none; /* No border for a modern look */ border-radius: 4px; /* Rounded corners for a softer look */ cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */ transition: background-color 0.3s; /* Smooth transition for hover effect */ } /* Button hover effect for visual feedback */ .button:hover { background-color: #0056b3; /* Slightly darker shade on hover for effect */ } </style>