如何调整html表格边框和列宽？-解网

问：

我想更改html表格的样式。现在它看起来像这样：

这是代码：

    <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>

和 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);
}

该函数所做的只是处理颜色。我一直在为两件非常糟糕的事情而苦苦挣扎：findCss

为每列设置相同的宽度，无论列中有多少块
每一列之间的间距我希望它像下面的屏幕截图一样，其中列的宽度（标记为蓝色框）的大小相同，并且列之间有很好的间隙，不会切断每列（标记为红色）中第一个单元格的左边框。现在，我通过为每个第一个单元格设置左边框来实现这个切割间隙，如下所示：

.border-left {
  border-left: 10px solid #dedbd9;
}

但它并不能解决问题，因为左侧被切断了。我将不胜感激

<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>

的css，reactjs，html 表格

0赞 psdpainter 11/10/2023

您是否考虑过更改表格结构？您不使用嵌套单元格，而是使用或用于表格单元格内容？flexgrid

0赞 jon 11/10/2023

我没有尝试改变它。您的意思是使用？html grid

0赞 Moob 11/10/2023

您能否发布呈现表的 html，而不是（或补充）生成它的代码？我认为这可以用CSS解决，但这里没有什么可以使用的。

0赞 psdpainter 11/10/2023

这在网格上，或这在柔性上。

1赞 jon 11/10/2023

是的，我在问题底部添加了完整的 html。复制和粘贴后应该可以工作

答：

1赞 Moob 11/11/2023 #1

这是非常具有挑战性的，我失败了。我能做的最好的事情就是使用并平衡列和伪元素，以添加您想要更宽间隙的边框。widthmin-width

.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>

我建议完全重写它以使用 css 网格！

0赞 jon 11/11/2023

谢谢。我很感激你的努力，我会用网格重写它，希望我能实现我的期望。

上一个：如何在粘性表头中不重叠地中断长内容

下一个：Crockfords 自上而下的运算符优先级

如何调整html表格边框和列宽？

How to adjust html table borders and column width?

评论

评论