.scrollable-container {
            width: 100%; /* oder eine feste Breite, z.B. 800px */
            overflow-x: auto;
            }


            .table-container2 {
    width: 100%;
    overflow-x: auto;  /* Aktiviert das horizontale Scrollen, wenn die Tabelle breiter als der Container ist */
    border: 1px solid #ccc;
    margin-top: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

.table {
    width: 100%;
    table-layout: fixed; /* Optional, um die Tabelle an den Container anzupassen */
  }
  
  .table td,
  .table th {
    white-space: nowrap;
  }
  

th, td {
    padding: 8px 15px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}




.table-responsive {
    overflow-x: auto; /* Ermöglicht horizontales Scrollen, wenn die Tabelle zu breit ist */
  }
  


  .my-custom-table-container {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #ccc;
    margin-top: 20px;
}

.my-custom-table {
    width: 100%;
    table-layout: auto; /* Geändert von 'fixed' zu 'auto' */
    border-collapse: collapse;
}

.my-custom-table th,
.my-custom-table td {
    border: 1px solid black;
    white-space: nowrap;
    padding: 8px 15px;
    text-align: left;
}

.my-custom-table th {
    background-color: #f2f2f2;
}

@media (max-width: 768px) {
    .my-custom-table th, .my-custom-table td {
        padding: 4px 8px; /* Reduzierte Polsterung auf kleinen Bildschirmen */
        font-size: 14px; /* Kleinere Schriftgröße auf kleinen Bildschirmen */
    }
}