AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • Início
  • system&network
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • Início
  • system&network
    • Recentes
    • Highest score
    • tags
  • Ubuntu
    • Recentes
    • Highest score
    • tags
  • Unix
    • Recentes
    • tags
  • DBA
    • Recentes
    • tags
  • Computer
    • Recentes
    • tags
  • Coding
    • Recentes
    • tags
Início / coding / Perguntas / 77461047
Accepted
jon
jon
Asked: 2023-11-10 23:17:52 +0800 CST2023-11-10 23:17:52 +0800 CST 2023-11-10 23:17:52 +0800 CST

Como ajustar as bordas da tabela HTML e a largura das colunas?

  • 772

Quero mudar os estilos da tabela HTML. No momento está assim:insira a descrição da imagem aqui

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 findCssfunção faz é lidar com as cores. Tenho lutado muito com duas coisas:

  1. Defina a mesma largura para cada coluna, independentemente de quantos blocos existem na coluna
  2. 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

insira a descrição da imagem aqui

<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>
html
  • 1 1 respostas
  • 36 Views

1 respostas

  • Voted
  1. Best Answer
    Moob
    2023-11-11T00:51:39+08:002023-11-11T00:51:39+08:00

    Isso é incrivelmente desafiador e eu falhei. O melhor que pude fazer foi usar widthe min-widthequilibrar as colunas e um pseudoelemento para adicionar uma borda onde você queria um espaço maior.

    .student-th{
      color: rgb(71, 71, 71);
      width:calc(100% / 7);
      max-width:calc(100% / 7);
      min-width:calc(100% / 7);
      border-right: 3px solid #dedbd9; 
      border-left: 3px solid #dedbd9; 
      border-top: 1px solid #dedbd9; 
      border-bottom: 1px solid #dedbd9;
    }
    .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;
      background-color: rgb(200, 200, 71);
      width:calc(100% / 43);
      min-width:calc(100% / 43);
      overflow-wrap: anywhere;
    }
    
    .student-calendar-table {
      border-collapse: separate;
      background-color: #dedbd9;
      margin: auto;
      width: 98%;
      border-radius: 30px; 
      overflow: hidden;
      margin: 0 auto; 
    }
    
    .border-left {
        position:relative;
    }
    .border-left:before {
        content: "";
        display: block;
        border-radius: 10px;
        background: #7d7d7d;
        position: absolute;
        top: 0;
        bottom: -4px;
        left: -5px;
        width: 2px;
    }
    
    .cell {
      height: 80px;
    }
    
    .student-block {
      cursor: pointer;
      transition: background-color 0.3s;
      text-align: center;
      color: rgb(71, 71, 71);
    }
    <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 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 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></tbody></table><div></div></div>

    Eu recomendo reescrevê-lo totalmente para usar a grade CSS !

    • 1

relate perguntas

  • Usando o ponto de código para renderizar o ícone delineado em vez de preenchido no Material Design Google Fonts

  • Como fazer tab como uma forma de seta usando css

  • Desenhando linhas inclinadas dentro da tabela em html e css

  • Tabela HTML com 2 linhas de células seguidas

  • Como criar material angular mat-grid-list

Sidebar

Stats

  • Perguntas 205573
  • respostas 270741
  • best respostas 135370
  • utilizador 68524
  • Highest score
  • respostas
  • Marko Smith

    destaque o código em HTML usando <font color="#xxx">

    • 2 respostas
  • Marko Smith

    Por que a resolução de sobrecarga prefere std::nullptr_t a uma classe ao passar {}?

    • 1 respostas
  • Marko Smith

    Você pode usar uma lista de inicialização com chaves como argumento de modelo (padrão)?

    • 2 respostas
  • Marko Smith

    Por que as compreensões de lista criam uma função internamente?

    • 1 respostas
  • Marko Smith

    Estou tentando fazer o jogo pacman usando apenas o módulo Turtle Random e Math

    • 1 respostas
  • Marko Smith

    java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

    • 3 respostas
  • Marko Smith

    Por que 'char -> int' é promoção, mas 'char -> short' é conversão (mas não promoção)?

    • 4 respostas
  • Marko Smith

    Por que o construtor de uma variável global não é chamado em uma biblioteca?

    • 1 respostas
  • Marko Smith

    Comportamento inconsistente de std::common_reference_with em tuplas. Qual é correto?

    • 1 respostas
  • Marko Smith

    Somente operações bit a bit para std::byte em C++ 17?

    • 1 respostas
  • Martin Hope
    fbrereto Por que a resolução de sobrecarga prefere std::nullptr_t a uma classe ao passar {}? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 Você pode usar uma lista de inicialização com chaves como argumento de modelo (padrão)? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi Por que as compreensões de lista criam uma função internamente? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A formato fmt %H:%M:%S sem decimais 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python std::views::filter do C++20 não filtrando a visualização corretamente 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute Por que 'char -> int' é promoção, mas 'char -> short' é conversão (mas não promoção)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa Por que o construtor de uma variável global não é chamado em uma biblioteca? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis Comportamento inconsistente de std::common_reference_with em tuplas. Qual é correto? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev Por que os compiladores perdem a vetorização aqui? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan Somente operações bit a bit para std::byte em C++ 17? 2023-08-17 17:13:58 +0800 CST

Hot tag

python javascript c++ c# java typescript sql reactjs html

Explore

  • Início
  • Perguntas
    • Recentes
    • Highest score
  • tag
  • help

Footer

AskOverflow.Dev

About Us

  • About Us
  • Contact Us

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve