/* Add this CSS code to your HTML file inside a <style> tag or link it via a .css file */

/* Styles for the main container wrapping the table */
.table-container {
    border-radius: 15px; /* Rounded corners for the entire output */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Shaded border effect */
    overflow: hidden; /* Ensures rounded corners are visible */
}

/* Styles for the table itself */
table {
    width: 100%;
    border-collapse: collapse; /* Merges cell borders */
    font-family: Arial, sans-serif;
    color: #333;
}

/* Styles for the table header */
table thead {
    background-color: #dc3545; /* Red background for the header */
    color: white; /* White text for the header */
}

/* Styles for table header cells */
table thead th {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 2px solid #ccc;
}

/* Rounded corners for the header */
table thead tr:first-child th:first-child {
    border-top-left-radius: 15px;
}
table thead tr:first-child th:last-child {
    border-top-right-radius: 15px;
}

/* Styles for the table body cells */
table tbody td {
    padding: 10px 15px;
    border-bottom: 1px solid #ddd;
}

/* Zebra-striping for alternating row colors */
table tbody tr:nth-child(even) {
    background-color: #f8f9fa; /* Light gray background for even rows */
}

/* Hover effect for rows */
table tbody tr:hover {
    background-color: #e2e6ea;
}

/* Rounded corners for the bottom of the table */
table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 15px;
}
table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 15px;
}