.foys-tabel {
    border-collapse: collapse;
    overflow-x: auto;
	width: 100%;
}

.foys-tabel th, 
.foys-tabel td {
    border: 1px solid #ccc;
    padding: 1em 2em 1em 2em;
    text-align: center;
    font-size: 0.9em;
}

.foys-tabel th {
    background: #f3f3f3;
    position: sticky;
    top: 0;
    z-index: 2;
}

.foys-tabel td.players {
    background-color: #0074c6;
	color: white;
	font-weight: bold;
}

.foys-tabel td.labelOnReservation {
    background-color: #B8002A;
	color: white;
	font-weight: bold;
}

@media (max-width: 768px) {
    .foys-tabel th, 
    .foys-tabel td {
        padding: 0.5em 0.8em;
        font-size: 0.9em;
    }
    .foys-tabel td.bezet {
		font-size: 8px;
		position:relative;
		color: #0074c6;
	}
    .foys-tabel td.bezet::after {
        content: attr(data-lastname);
        word-spacing: normal;
        text-indent: 0;
		color: white;
		position: absolute;
		font-size: 11px;		
        line-height: normal;
        left: 0.5em;
		top: 0.3em;
        padding: 0.3em 0.5em;
		
    }
}

@media (max-width: 480px) {
    .foys-tabel th, 
    .foys-tabel td {
        padding: 0.3em 0.5em;
        font-size: 0.8em;
    }
    .foys-tabel td.bezet {
		font-size: 5px;
		position:relative;
		color: #0074c6;
	}
    .foys-tabel td.bezet::after {
        content: attr(data-lastname);
        word-spacing: normal;
        text-indent: 0;
		color: white;
		position: absolute;
		font-size: 10px;	
        line-height: normal;
        padding: 0.3em 0.5em;
        left: 0.5em;
		top: 0.3em;
    }
}