如何让日历表格中的日期高度统一并将事件置于单元格底部？

DevOps 小满

2026-8-13

问题描述

刚接触表格使用，不确定哪里出错了。我制作的日历表格中，带有事件（School、Holiday、Trip）的日期“2”“11”“17”与其他日期高度不对齐，希望这些日期和其他日期高度一致，同时将事件置于单元格底部。

原HTML代码

<div class="main-calender">
  <div class="header-month">
    <h3>October 2022</h3>
  </div>
  <table>
    <thead>
      <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>The</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="6"></td>
        <td>1</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>
          2 <br />

          <a href="https://losrios.edu/" target="_blank">School</a>
        </td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>10</td>
        <td>
          11 <br />
          <span>Holiday</span>
        </td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
      </tr>
      <tr>
        <td>16</td>
        <td>
          17 <br />
          <span>Trip </span>
        </td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
      </tr>
      <tr>
        <td>23</td>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
      </tr>
      <tr>
        <td>30</td>
        <td>31</td>
        <td colspan="5"></td>
      </tr>
    </tbody>
  </table>
</div>

原CSS代码

.main-calender,
table {
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  height: 400px;
}

.header-month {
  text-align: center;
  letter-spacing: 1px;
}

tr,
th,
td {
  padding: 15px;
}

table,
th,
td {
  width: 100%;
  text-align: center;
  table-layout: fixed;
}
/*  =============
    typography 
    =============  */

.main-calender tbody {
  background-image: url(/images/background.jpg);
  background-color: #475465;
}

.header-month {
  color: black;
}

table,
th,
td {
  border-collapse: collapse;
  border: 3px solid black;
}

th {
  background: #475465;
  color: #fff;
}

td {
  color: #fff;
}

.main-calender span {
  font-size: small;
  font-weight: bold;
  color: black;
}

/*  =============
    components
    =============  */

td:hover {
  background: #219ebc;
}

/* link (school) */
.link-main span {
  text-decoration: none;
}

/* link (school) */
.main-calender a {
  font-size: small;
  text-decoration: none underline;
  color: #000000;
  font-weight: bold;
}

解决方案

1. 修复HTML表格结构错误

原代码第一行<tr>中，在<td colspan="6"></td><td>1</td>后额外添加了多个空<td>，导致该行单元格数量远超表头的7列，破坏了表格结构，这是高度不对齐的核心原因之一。需删除多余空<td>，确保每行单元格数量与表头一致。

2. 调整CSS实现单元格高度统一+事件居底

给<td>设置flex布局，通过flex-direction: column让单元格内元素垂直排列，再用justify-content: space-between将日期顶在上方、事件推到底部，同时设置height: 100%保证所有单元格高度一致。

修改后的完整代码

HTML代码

<div class="main-calender">
  <div class="header-month">
    <h3>October 2022</h3>
  </div>
  <table>
    <thead>
      <tr>
        <th>Sun</th>
        <th>Mon</th>
        <th>The</th>
        <th>Wed</th>
        <th>Thu</th>
        <th>Fri</th>
        <th>Sat</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td colspan="6"></td>
        <td>1</td>
      </tr>
      <tr>
        <td>
          <span class="date">2</span>
          <a href="https://losrios.edu/" target="_blank">School</a>
        </td>
        <td><span class="date">3</span></td>
        <td><span class="date">4</span></td>
        <td><span class="date">5</span></td>
        <td><span class="date">6</span></td>
        <td><span class="date">7</span></td>
        <td><span class="date">8</span></td>
      </tr>
      <tr>
        <td><span class="date">9</span></td>
        <td><span class="date">10</span></td>
        <td>
          <span class="date">11</span>
          <span>Holiday</span>
        </td>
        <td><span class="date">12</span></td>
        <td><span class="date">13</span></td>
        <td><span class="date">14</span></td>
        <td><span class="date">15</span></td>
      </tr>
      <tr>
        <td><span class="date">16</span></td>
        <td>
          <span class="date">17</span>
          <span>Trip </span>
        </td>
        <td><span class="date">18</span></td>
        <td><span class="date">19</span></td>
        <td><span class="date">20</span></td>
        <td><span class="date">21</span></td>
        <td><span class="date">22</span></td>
      </tr>
      <tr>
        <td><span class="date">23</span></td>
        <td><span class="date">24</span></td>
        <td><span class="date">25</span></td>
        <td><span class="date">26</span></td>
        <td><span class="date">27</span></td>
        <td><span class="date">28</span></td>
        <td><span class="date">29</span></td>
      </tr>
      <tr>
        <td><span class="date">30</span></td>
        <td><span class="date">31</span></td>
        <td colspan="5"></td>
      </tr>
    </tbody>
  </table>
</div>

CSS代码

.main-calender,
table {
  margin-top: 10%;
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  height: 400px;
}

.header-month {
  text-align: center;
  letter-spacing: 1px;
}

tr,
th,
td {
  padding: 15px;
}

table,
th,
td {
  width: 100%;
  text-align: center;
  table-layout: fixed;
  border-collapse: collapse;
  border: 3px solid black;
}

/*  =============
    typography 
    =============  */

.main-calender tbody {
  background-image: url(/images/background.jpg);
  background-color: #475465;
}

.header-month {
  color: black;
}

th {
  background: #475465;
  color: #fff;
}

td {
  color: #fff;
  /* 核心布局：flex垂直排列，元素上下分布 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.main-calender span {
  font-size: small;
  font-weight: bold;
  color: black;
}

/* 日期样式统一 */
.date {
  font-size: initial;
  color: #fff;
  font-weight: normal;
}

/*  =============
    components
    =============  */

td:hover {
  background: #219ebc;
}

/* link (school) */
.link-main span {
  text-decoration: none;
}

/* link (school) */
.main-calender a {
  font-size: small;
  text-decoration: none underline;
  color: #000000;
  font-weight: bold;
}

修改说明

修复第一行多余的<td>，保证表格结构合规；
给所有日期添加.date类，统一基础样式；
通过flex布局实现日期顶格、事件居底的效果；
设置td { height: 100% }，确保所有单元格高度完全一致。

内容的提问来源于stack exchange，提问作者Desmond Winn

如何让日历表格中的日期高度统一并将事件置于单元格底部？

原HTML代码 #

原CSS代码 #

1. 修复HTML表格结构错误 #

2. 调整CSS实现单元格高度统一+事件居底 #

修改后的完整代码 #

HTML代码 #

CSS代码 #

修改说明 #