Quero mudar os estilos da tabela HTML. No momento está assim:
E aqui está o código:
<div className="student-schedule">
<table className="student-calendar-table">
<thead>
<tr>
<th className=''></th>
{weekDays.map((day) => (
<th className='student-th border-left' colSpan={6} key={day}>
{day}
</th>
))}
</tr>
<tr>
<th className=''></th>
{dates.map((date) => (
<th className='student-th border-left' colSpan={6} key={date}>
{date}
</th>
))}
</tr>
</thead>
<tbody>
{timeSlots.map((time, i) => (
<tr key={time}>
<td className='student-td cell'>{time}</td>
{tableCells[i].map((cell, index) => {
const cellsLen = cell.length;
const tdElements = [];
if (cellsLen < 4) {
for (let j = 0; j < cellsLen; j++) {
tdElements.push(<td onClick={() => handleCellClick(cell[j])} className={findCss(cell[j], j)} key={index + '-' + j} colSpan={6 / cellsLen}>{cell[j].isReserved ? cell[j].lessonWith : cell[j].lessonWith}</td>);
}
return tdElements;
}
else {
return (<td onClick={() => OpenMultipleInstructorPopupVisible(cell)} className='student-td multiple-instructors student-block border-left' colSpan={6}>3+ osoby</td>);
}
})}
</tr>
))}
</tbody>
</table>
<div>
{isReservationPopupVisible && <ReservationPopup onClose={closePopup} block={block} myReservations={myReservations} blocks={blocks} />}
{isMultipleInstructorPopupVisible && <MultipleInstructorsPopup onClose={closePopup} blocks={extraInstructors} myReservations={myReservations} allBlocks={blocks} />}
</div>
</div>
e CSS:
.student-th{
color: rgb(71, 71, 71);
}
.student-td {
border-radius: 10px;
border-right: 3px solid #dedbd9;
border-left: 3px solid #dedbd9;
border-top: 1px solid #dedbd9;
border-bottom: 1px solid #dedbd9;
color: rgb(71, 71, 71);
box-sizing:content-box;
}
.student-calendar-table {
border-collapse: separate;
background-color: #dedbd9;
margin: auto;
width: 98%;
border-radius: 30px;
overflow: hidden;
margin: 0 auto;
}
/* .border-left {
border-left: 10px solid #f70b0b;
} */
.cell {
height: 80px;
}
.student-block {
cursor: pointer;
transition: background-color 0.3s;
text-align: center;
color: rgb(71, 71, 71);
}
tudo o que essa findCss
função faz é lidar com as cores. Tenho lutado muito com duas coisas:
- Defina a mesma largura para cada coluna, independentemente de quantos blocos existem na coluna
- Espaço entre cada coluna de dia Eu gostaria que fosse como na imagem abaixo, onde a largura das colunas (marcadas em caixas azuis) é do mesmo tamanho e há um bom espaço entre as colunas que não corta a borda esquerda das primeiras células em cada coluna (marcada em vermelho). Agora consegui essa lacuna de corte definindo a borda esquerda para cada primeira célula assim:
.border-left {
border-left: 10px solid #dedbd9;
}
Mas isso não resolve o problema porque o lado esquerdo é cortado. ficarei grato pela ajuda
<div class="student-schedule"><table class="student-calendar-table"><thead><tr><th class=""></th><th class="student-th border-left" colspan="6" style="width: 200px;">Poniedziałek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Wtorek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Środa</th><th class="student-th border-left" colspan="6" style="width: 200px;">Czwartek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Piątek</th><th class="student-th border-left" colspan="6" style="width: 200px;">Sobota</th><th class="student-th border-left" colspan="6" style="width: 200px;">Niedziela</th></tr><tr><th class=""></th><th class="student-th border-left" colspan="6" style="width: 200px;">13/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">14/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">15/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">16/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">17/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">18/11/2023</th><th class="student-th border-left" colspan="6" style="width: 200px;">19/11/2023</th></tr></thead><tbody><tr><td class="student-td cell">8:00</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-0 border-left" colspan="6">Paweł Jankowski</td><td class="student-td student-block instructor-0 border-left" colspan="6">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="6">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-3" colspan="3">Robert Maj</td></tr><tr><td class="student-td cell">10:00</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td not-available student-block-unavailable" colspan="2">Aneta Gajos</td><td class="student-td not-available student-block-unavailable" colspan="2">Krzysztof Wiśniewski</td><td class="student-td reserved-by-me student-block" colspan="2">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="3">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1 border-left" colspan="3">Aneta Gajos</td><td class="student-td student-block instructor-2" colspan="3">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">12:00</td><td class="student-td student-block instructor-0 border-left" colspan="3">Paweł Jankowski</td><td class="student-td not-available student-block-unavailable" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-0" colspan="2">Paweł Jankowski</td><td class="student-td not-available student-block-unavailable border-left" colspan="2">Aneta Gajos</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td not-available student-block-unavailable" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">14:00</td><td class="student-td not-available student-block-unavailable border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td not-available student-block-unavailable" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td not-available student-block-unavailable" colspan="2">Robert Maj</td><td class="student-td not-available student-block-unavailable" colspan="2">Paweł Jankowski</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">16:00</td><td class="student-td not-available student-block-unavailable border-left" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-1" colspan="3">Aneta Gajos</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-2 border-left" colspan="3">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="3">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-2 border-left" colspan="2">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-0" colspan="2">Paweł Jankowski</td><td class="student-td not-available student-block-unavailable border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">18:00</td><td class="student-td not-available student-block-unavailable border-left" colspan="6">Paweł Jankowski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td><td class="student-td student-block instructor-2 border-left" colspan="3">Krzysztof Wiśniewski</td><td class="student-td student-block instructor-3" colspan="3">Robert Maj</td><td class="student-td student-block instructor-3 border-left" colspan="3">Robert Maj</td><td class="student-td student-block instructor-0" colspan="3">Paweł Jankowski</td><td class="student-td student-block instructor-3 border-left" colspan="6">Robert Maj</td><td class="student-td student-block instructor-1 border-left" colspan="2">Aneta Gajos</td><td class="student-td student-block instructor-3" colspan="2">Robert Maj</td><td class="student-td student-block instructor-2" colspan="2">Krzysztof Wiśniewski</td><td class="student-td multiple-instructors student-block border-left" colspan="6">3+ osoby</td></tr><tr><td class="student-td cell">20:00</td></tr></tbody></table><div></div></div>
Isso é incrivelmente desafiador e eu falhei. O melhor que pude fazer foi usar
width
emin-width
equilibrar as colunas e um pseudoelemento para adicionar uma borda onde você queria um espaço maior.Eu recomendo reescrevê-lo totalmente para usar a grade CSS !