当前位置：首页 > CSS

css表格制作日历

2026-04-02 18:57:55CSS

CSS表格制作日历的方法

使用HTML和CSS创建日历表格是一种常见的网页设计方式。以下是实现日历布局的几种方法：

基础表格结构

HTML部分需要创建表格元素，CSS部分负责样式设计：

<table class="calendar">
  <thead>
    <tr>
      <th>周日</th>
      <th>周一</th>
      <th>周二</th>
      <th>周三</th>
      <th>周四</th>
      <th>周五</th>
      <th>周六</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <!-- 更多日期行 -->
  </tbody>
</table>

基本样式设置

通过CSS定义日历外观：

css表格制作日历

.calendar {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

.calendar th {
  background-color: #f2f2f2;
  padding: 10px;
  text-align: center;
}

.calendar td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  height: 40px;
}

响应式设计

添加媒体查询使日历适应不同屏幕尺寸：

@media (max-width: 600px) {
  .calendar th, .calendar td {
    padding: 5px;
    font-size: 12px;
  }
}

高亮当前日期

使用JavaScript动态添加高亮类：

css表格制作日历

const today = new Date().getDate();
document.querySelectorAll('.calendar td').forEach(td => {
  if(td.textContent == today) {
    td.classList.add('today');
  }
});

对应CSS样式：

.today {
  background-color: #4CAF50;
  color: white;
  font-weight: bold;
}

月份切换功能

完整的日历通常需要月份切换功能，这需要结合JavaScript实现：

// 这里需要添加月份切换逻辑
function updateCalendar(year, month) {
  // 更新日历内容的代码
}

使用CSS Grid布局

替代表格布局的现代方案：

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.day-header {
  background-color: #f2f2f2;
  padding: 10px;
  text-align: center;
}

.day-cell {
  border: 1px solid #ddd;
  padding: 10px;
  min-height: 80px;
}

以上方法提供了从基础到进阶的日历实现方案，可以根据项目需求选择合适的实现方式。