table-单元格边框未延伸至行高

Question

我正在使用 display:table-cell 来显示日历。

当我有一天包含大量文本时，该正方形比该行中的其余正方形大，但是该行中的其他 div 不会扩展其边框以匹配新高度。

我是不是做错了什么？

查看 plunker：

  https://plnkr.co/edit/sUHLvFnbQv6qpXNZkG0J

.calendar-week-container {
  display: table;
  width:100%; 
}
.row-container {
  display: table-row;
  width:100%; 
}
.calendar-day{
    display: table-cell;
    min-height:50px;
    float:left;
    width:20%;
    
    border-top:1px solid red;
    border-left:1px solid red;
}

    <div class="calendar-week-container">
      <div class="row-container">
          <div class="calendar-day">
            My Day 1
          </div>
          <div class="calendar-day">
            My Day 2
             <br>
            asdasd
            <br>
            asdasdads <br>
            asdasd
            <br>
            asdasdads
          </div>
                <div class="calendar-day">
            My Day 3
          </div>
          <div class="calendar-day">
            My Day 4
           
          </div>
        </div>
      <div class="row-container">
                <div class="calendar-day">
            My Day 5
          </div>
                <div class="calendar-day">
            My Day 6
          </div>
                <div class="calendar-day">
            My Day 7
          </div>
                <div class="calendar-day">
            My Day 8
          </div>
        </div>
        </div>

Answer 1

删除 "cell" div 上的 float - 不确定为什么会出现在 table 布局中。

.calendar-week-container {
  display: table;
  width:100%; 
}
.row-container {
  display: table-row;
  width:100%; 
}
.calendar-day{
    display: table-cell;
    min-height:50px;
    width:20%;
    
    border-top:1px solid red;
    border-left:1px solid red;
}

    <div class="calendar-week-container">
      <div class="row-container">
          <div class="calendar-day">
            My Day 1
          </div>
          <div class="calendar-day">
            My Day 2
             <br>
            asdasd
            <br>
            asdasdads <br>
            asdasd
            <br>
            asdasdads
          </div>
                <div class="calendar-day">
            My Day 3
          </div>
          <div class="calendar-day">
            My Day 4
           
          </div>
        </div>
      <div class="row-container">
                <div class="calendar-day">
            My Day 5
          </div>
                <div class="calendar-day">
            My Day 6
          </div>
                <div class="calendar-day">
            My Day 7
          </div>
                <div class="calendar-day">
            My Day 8
          </div>
        </div>
        </div>

table-单元格边框未延伸至行高

table-cell border not extending to row height

css

css-tables