Question

我在HTML / CSS中创建了一个日历，列出了本周的课程安排。日历实际上只是一个表格，其中div元素代表当天以及当天的课程。当表格单元格中的课程数量相等时，它看起来很好，但是如果课程数量不均匀，则 td 元素会被分散。有没有办法让所有 td 元素保持在表格中。谢谢。

fiddle

HTML

<h1>CSS Table</h1>
<div class="month">
  <ul>
    <li class="prev">&#10094;</li>
    <li class="next">&#10095;</li>
    <li style="text-align:center">August
      <br>
      <span style="font-size:18px">2016</span></li>
  </ul>
</div>
<table>
  <tr class="weekdays">
    <th>Mo</th>
    <th>Tu</th>
    <th>We</th>
    <th>Th</th>
    <th>Fr</th>
    <th>Sa</th>
    <th>Su</th>
  </tr>
  <tr class="days">
    <!-- MO -->
    <td>
      <div class="row calendar-cell">
        <div class="row calendar-block success">
          Eng 211
        </div>
        <div class="row calendar-block success">
          Phy 202
        </div>
        <div class="row calendar-block success">
          CS 223
        </div>
        <div class="row text-right cell">
          <span class="cell-text">0</span>
        </div>
      </div>
    </td>
    <!-- TU -->
    <td>
      <div class="row calendar-cell">
        <div class="row calendar-block success">
          Math 113
        </div>
        <div class="row calendar-block success">
          Bio 271
        </div>
        <div class="row text-right cell">
          <span class="cell-text">0</span>
        </div>
      </div>
    </td>
    <!-- WE -->
    <td>
      <div class="row calendar-cell">
        <div class="row calendar-block success">
          Eng 211
        </div>
        <div class="row calendar-block success">
          Phy 202
        </div>
        <div class="row calendar-block success">
          CS 223
        </div>
        <div class="row text-right cell">
          <span class="cell-text">0</span>
        </div>
      </div>
    </td>
    <!-- TH -->
    <td>
      <div class="row calendar-cell">
        <div class="row calendar-block success">
          Math 113
        </div>
        <div class="row calendar-block success">
          Bio 271
        </div>
        <div class="row text-right cell">
          <span class="cell-text">0</span>
        </div>
      </div>
    </td>
    <!-- FR -->
    <td>
      <div class="row calendar-cell">
        <div class="row calendar-block success">
          Eng 211
        </div>
        <div class="row calendar-block success">
          Phy 202
        </div>
        <div class="row calendar-block success">
          CS 223
        </div>
        <div class="row text-right cell">
          <span class="cell-text">0</span>
        </div>
      </div>
    </td>
    <!-- SA -->
    <td>
      <div class="row calendar-cell">
        <div class="row text-right cell">
          <span class="cell-text">0</span>
        </div>
      </div>
    </td>
    <!-- SU -->
    <td>
      <div class="row calendar-cell">
        <div class="row text-right cell">
          <span class="cell-text">0</span>
        </div>
      </div>
    </td>
  </tr>
</table>

CSS

/* inspired by w3school */


/* https://www.w3schools.com/howto/howto_css_calendar.asp */

* {
  box-sizing: border-box;
}

ul {
  list-style-type: none;
}

body {
  font-family: Verdana, sans-serif;
}

table {
  width: 100%;
}

.month {
  padding: 70px 25px;
  width: 100%;
  background: #1abc9c;
}

.month ul {
  margin: 0;
  padding: 0;
}

.month ul li {
  color: white;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.month .prev {
  float: left;
  padding-top: 10px;
}

.month .next {
  float: right;
  padding-top: 10px;
}

.weekdays {
  margin: 0;
  padding: 10px 0;
  background-color: #ddd;
}

.weekdays th {
  display: inline-block;
  width: 13.6%;
  color: #666;
  text-align: center;
}

.days {
  padding: 10px 0;
  /*background: #eee;*/
  margin: 0;
}

.calendar-cell {
  height: 100%;
}

.days td {
  list-style-type: none;
  display: inline-block;
  width: 13.6%;
  text-align: center;
  /*margin-bottom: 5px;*/
  font-size: 12px;
  position: relative;
  /* height:0; */
  border: 1px solid #0C0C0C;
  /* color: #777; */
}

.days .row {
  margin-right: 0px;
}

.days td .active {
  padding: 5px;
  background: #1abc9c;
  color: white !important
}


/* Add media queries for smaller screens */

@media screen and (max-width:720px) {
  .weekdays li,
  .days li {
    width: 13.1%;
  }
}

@media screen and (max-width: 420px) {
  .weekdays li,
  .days li {
    width: 12.5%;
  }
  .days li .active {
    padding: 2px;
  }
}

@media screen and (max-width: 290px) {
  .weekdays li,
  .days li {
    width: 12.2%;
  }
}

.calendar-block {
  border-style: solid;
  border-color: black;
  border-width: thin;
  color: white;
  padding: 8px 28px;
  font-size: 16px;
  cursor: pointer;
}

.success {
  background-color: #4CAF50;
}


/* Green */


/*----------*/


/*   card   */

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

img {
  border-radius: 5px 5px 0 0;
}

.card-container {
  padding: 2px 16px;
}

.cell-text {
  font-size: 1.8em;
  font-weight: 400;
  opacity: .5;
  margin-top: 15px;
  margin-right: 15px;
  float: right;
  margin-bottom: 10px;
}

Answer 1

在“.days”类

上使用flex

.days {
    display: flex;
}

Answer 2

你的表格没有对齐，因为第一行的TD是7然后下一行不是7.它们应该相等。修复你的桌面结构，然后在你想要的TD上添加你的DIV。

<table>
    <tr>
        <td>Mo</td>
        <td>Tu</td>
        <td>We</td>
        <td>Th</td>
        <td>Fr</td>
        <td>Sa</td>
        <td>Su</td>
    </tr>
    <tr class="week1"> 
        <td></td>
        <td>Subject 2</td>
        <td>Subject 3</td>
        <td>Subject 4</td>
        <td></td>
        <td>Subject 6</td>
        <td>Subject 7</td>
    </tr>
    <tr class="week2"> 
        <td>Subject 1</td>
        <td>Subject 2</td>
        <td></td>
        <td>Subject 4</td>
        <td>Subject 5</td>
        <td></td>
        <td>Subject 7</td>
    </tr>
</table>

HTML - 如何对表td

2 个答案: