.table-container {
  /* Set a fixed height for vertical scrolling */
  height: 400px; /* Adjust as needed */
  /* Set a fixed width or max-width for horizontal scrolling */
  width: 100%; /* Or a specific pixel value like 500px */
  overflow: auto; /* Enables both horizontal and vertical scrolling as needed */
  /* overflow-x: auto; */ /* Use if you only need horizontal scroll */
  /* overflow-y: auto; */ /* Use if you only need vertical scroll */
}

/* Optional: Make headers sticky for better user experience */
.table-container thead {
  position: sticky;
  top: 0;
  background-color: #f0f0f0; /* Add a background for visibility */
  z-index: 1; /* Ensure header stays on top of scrolling content */
}

/* Basic table styling */
table {
  width: 100%; /* Ensures table takes full width of container */
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  border: 1px solid #ffffff;
  text-align: left;
}