嘿，我太懂你现在卡在这两个问题上的烦躁了——既要让每列宽度完全一致，又要给列之间留好看的间隙还不破坏单元格边框，我来帮你捋清楚解决方案！

先复盘下你的现状：表格按每天拆分了6个小列（通过colSpan=6实现），单元格根据内容合并小列。现在要搞定两个核心需求：每一列（对应单日）的总宽度完全统一，以及列间有清晰间隙且不截断单元格边框。

问题1：统一每列宽度 #

你之前尝试给th加内联style="width: 200px"，但表格默认的自动布局会被内容撑开，我们换个更可靠的方式：

1. 给表格设置table-layout: fixed，这个属性会强制表格严格遵循我们设定的列宽渲染，完全不受内容影响；
2. 计算总列数：时间列1列 + 7天×6小列 = 43列，给时间列固定宽度后，让7天的列自动平分剩余宽度。

问题2：设置列间距且不截断边框 #

之前用border-left模拟间隙的方式会破坏单元格边框完整性，我们改用border-spacing结合表格背景色实现真正的间隙：

1. 删掉.border-left类的边框设置，用表格的border-spacing创建列间间隙；
2. 表格背景色是#dedbd9，间隙会自动显示这个颜色，刚好形成你想要的分隔效果。

修改后的代码实现 #

React代码（主要调整表头列的宽度逻辑）

<div className="student-schedule">
  <table className="student-calendar-table">
    <thead>
      <tr>
        <th className='time-column'></th>
        {weekDays.map((day) => (
          <th className='student-th' colSpan={6} key={day}>
            {day}
          </th>
        ))}
      </tr>
      <tr>
        <th className='time-column'></th>
        {dates.map((date) => (
          <th className='student-th' 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' 
                  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: 1px solid #dedbd9; /* 统一边框样式，移除左右粗边框 */
  color: rgb(71, 71, 71);
  box-sizing: content-box;
}

.student-calendar-table {
  border-collapse: separate; /* 保留这个属性，才能使用border-spacing */
  border-spacing: 10px 0; /* 10px是列间水平间隙，垂直间隙设为0 */
  background-color: #dedbd9;
  margin: 0 auto;
  width: 98%;
  table-layout: fixed; /* 关键：固定表格布局，强制列宽生效 */
  border-radius: 30px;
  overflow: hidden;
}

/* 给时间列设置固定宽度 */
.time-column {
  width: 80px; /* 可根据需求调整 */
}

/* 计算单日列的宽度：总宽度减去时间列，平均分给7天 */
.student-th {
  width: calc((100% - 80px) / 7);
}

.cell {
  height: 80px;
}

.student-block {
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  color: rgb(71, 71, 71);
}

/* 移除之前模拟间隙的border-left设置 */
/* .border-left {
  border-left: 10px solid #dedbd9;
} */

关键调整说明 #

1. table-layout: fixed：彻底锁死列宽，不管单元格内容多少，都严格遵循我们设定的宽度值；
2. border-spacing: 10px 0：用表格自带的间隙属性实现列间分隔，间隙显示表格背景色，完美替代之前的border-left方案，不会破坏单元格边框；
3. 动态计算列宽：通过calc让7天的列自动平分剩余宽度，确保每列宽度完全一致；
4. 统一单元格边框：把之前的左右粗边框改成统一的1px边框，保证单元格的圆角和边框完整性。

你可以根据实际需求调整time-column的宽度和border-spacing的间隙大小，这样应该就能实现你想要的效果啦！

备注：内容来源于stack exchange，提问作者jon