.table-div {
    display: grid;
    width: 100%;
    border-collapse: collapse;

    /*grid-template-columns: repeat(4, 1fr);*/ /* Adjust number of columns as needed */
    grid-template-columns: 2fr 60px 1fr 1fr; /* Definisikan lebar kolom yang berbeda-beda */
}

.table-div-row {
    /*display: table-row; */
    display: contents; /* Allow direct child elements to participate in grid layout */
}

.table-div-cell {
    /*display: table-cell;*/
    display: block;
    padding: 6px 8px;
    border-bottom: 1px solid #ddd;
    /*text-align: left; */
}

.table-div-row-header .table-div-cell {
    font-weight: bold;
    background-color: #f4f4f4;
}

/* striped effect (striped) */
.table-div-row:nth-child(odd) .table-div-cell {
    background-color: #f9f9f9;
}

.table-div-row:nth-child(even) .table-div-cell {
    background-color: #fff;
}

/* hover row effect */
.table-div-row:not(.table-div-row-header):hover .table-div-cell {
    background-color: #f0f0f0;
    cursor: pointer;
}