当显示为表格时使div对齐的问题

Question

我正在尝试使用div来显示数据表，但是能够添加一些其他CSS使其具有响应性，但是即使是默认布局，我也遇到了问题。

提琴：https://jsfiddle.net/qmdrh2av/

HTML：

<div class="rTable"><div class="rTableRow"><div class="rTableHead">Day</div><div class="rTableHead">Tempature</div><div class="rTableHead">Wind</div><div class="rTableHead">Clouds</div><div class="rTableHead">Rain</div></div><div class="rTableRow"><div class="rTableCell"><div style="background-color: #FF8484"><div class="weatherForcastContentCell">Monday</div><div class="weatherForcastGradeCell"><h2><b>F-</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #51FF51"><div class="weatherForcastContentCell"><span style="font-size:2em">81°F</span></div><div class="weatherForcastGradeCell"><h2><b>A+</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #E9FF67"><div class="weatherForcastContentCell"><span style="font-size:2em">9</span>mph<br><span style="font-size:.5em">12mph</span></div><div class="weatherForcastGradeCell"><h2><b>C+</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #D2FF64"><div class="weatherForcastContentCell"><span style="font-size:2em">30%</span></div><div class="weatherForcastGradeCell"><h2><b>B-</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #FF8484"><div class="weatherForcastContentCell"><span style="font-size:2em">85%</span><br><span style="font-size:.5em">5.0mm</span></div><div class="weatherForcastGradeCell"><h2><b>F-</b></h2></div></div></div></div><div class="rTableRow"><div class="rTableCell"><div style="background-color: #88FF59"><div class="weatherForcastContentCell">Tuesday</div><div class="weatherForcastGradeCell"><h2><b>A-</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #FFFF6B"><div class="weatherForcastContentCell"><span style="font-size:2em">90°F</span></div><div class="weatherForcastGradeCell"><h2><b>C</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #E9FF67"><div class="weatherForcastContentCell"><span style="font-size:2em">9</span>mph<br><span style="font-size:.5em">12mph</span></div><div class="weatherForcastGradeCell"><h2><b>C+</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #6DFF55"><div class="weatherForcastContentCell"><span style="font-size:2em">13%</span></div><div class="weatherForcastGradeCell"><h2><b>A</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #51FF51"><div class="weatherForcastContentCell"><span style="font-size:2em">0%</span><br><span style="font-size:.5em">0.0mm</span></div><div class="weatherForcastGradeCell"><h2><b>A+</b></h2></div></div></div></div><div class="rTableRow"><div class="rTableCell"><div style="background-color: #88FF59"><div class="weatherForcastContentCell">Wednesday</div><div class="weatherForcastGradeCell"><h2><b>A-</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #E9FF67"><div class="weatherForcastContentCell"><span style="font-size:2em">89°F</span></div><div class="weatherForcastGradeCell"><h2><b>C+</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #FFFF6B"><div class="weatherForcastContentCell"><span style="font-size:2em">10</span>mph<br><span style="font-size:.5em">13mph</span></div><div class="weatherForcastGradeCell"><h2><b>C</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #6DFF55"><div class="weatherForcastContentCell"><span style="font-size:2em">11%</span></div><div class="weatherForcastGradeCell"><h2><b>A</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #51FF51"><div class="weatherForcastContentCell"><span style="font-size:2em">0%</span><br><span style="font-size:.5em">0.0mm</span></div><div class="weatherForcastGradeCell"><h2><b>A+</b></h2></div></div></div></div><div class="rTableRow"><div class="rTableCell"><div style="background-color: #88FF59"><div class="weatherForcastContentCell">Thursday</div><div class="weatherForcastGradeCell"><h2><b>A-</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #88FF59"><div class="weatherForcastContentCell"><span style="font-size:2em">83°F</span></div><div class="weatherForcastGradeCell"><h2><b>A-</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #FFFF6B"><div class="weatherForcastContentCell"><span style="font-size:2em">10</span>mph<br><span style="font-size:.5em">13mph</span></div><div class="weatherForcastGradeCell"><h2><b>C</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #51FF51"><div class="weatherForcastContentCell"><span style="font-size:2em">7%</span></div><div class="weatherForcastGradeCell"><h2><b>A+</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #51FF51"><div class="weatherForcastContentCell"><span style="font-size:2em">0%</span><br><span style="font-size:.5em">0.0mm</span></div><div class="weatherForcastGradeCell"><h2><b>A+</b></h2></div></div></div></div><div class="rTableRow"><div class="rTableCell"><div style="background-color: #6DFF55"><div class="weatherForcastContentCell">Friday</div><div class="weatherForcastGradeCell"><h2><b>A</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #88FF59"><div class="weatherForcastContentCell"><span style="font-size:2em">84°F</span></div><div class="weatherForcastGradeCell"><h2><b>A-</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #A2FF5C"><div class="weatherForcastContentCell"><span style="font-size:2em">7</span>mph<br><span style="font-size:.5em">9mph</span></div><div class="weatherForcastGradeCell"><h2><b>B+</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #51FF51"><div class="weatherForcastContentCell"><span style="font-size:2em">8%</span></div><div class="weatherForcastGradeCell"><h2><b>A+</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #51FF51"><div class="weatherForcastContentCell"><span style="font-size:2em">0%</span><br><span style="font-size:.5em">0.0mm</span></div><div class="weatherForcastGradeCell"><h2><b>A+</b></h2></div></div></div></div><div class="rTableRow"><div class="rTableCell"><div style="background-color: #6DFF55"><div class="weatherForcastContentCell">Saturday</div><div class="weatherForcastGradeCell"><h2><b>A</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #88FF59"><div class="weatherForcastContentCell"><span style="font-size:2em">84°F</span></div><div class="weatherForcastGradeCell"><h2><b>A-</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #88FF59"><div class="weatherForcastContentCell"><span style="font-size:2em">7</span>mph<br><span style="font-size:.5em">8mph</span></div><div class="weatherForcastGradeCell"><h2><b>A-</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #6DFF55"><div class="weatherForcastContentCell"><span style="font-size:2em">11%</span></div><div class="weatherForcastGradeCell"><h2><b>A</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #51FF51"><div class="weatherForcastContentCell"><span style="font-size:2em">0%</span><br><span style="font-size:.5em">0.0mm</span></div><div class="weatherForcastGradeCell"><h2><b>A+</b></h2></div></div></div></div><div class="rTableRow"><div class="rTableCell"><div style="background-color: #6DFF55"><div class="weatherForcastContentCell">Sunday</div><div class="weatherForcastGradeCell"><h2><b>A</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #88FF59"><div class="weatherForcastContentCell"><span style="font-size:2em">83°F</span></div><div class="weatherForcastGradeCell"><h2><b>A-</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #A2FF5C"><div class="weatherForcastContentCell"><span style="font-size:2em">7</span>mph<br><span style="font-size:.5em">9mph</span></div><div class="weatherForcastGradeCell"><h2><b>B+</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #51FF51"><div class="weatherForcastContentCell"><span style="font-size:2em">6%</span></div><div class="weatherForcastGradeCell"><h2><b>A+</b></h2></div></div></div><div class="rTableCell"><div style="background-color: #51FF51"><div class="weatherForcastContentCell"><span style="font-size:2em">0%</span><br><span style="font-size:.5em">0.0mm</span></div><div class="weatherForcastGradeCell"><h2><b>A+</b></h2></div></div></div></div></div>

CSS：

.rTable {
    display: table;
}

.rTableRow {
    display: table-row;
}

.rTableHeading {
    display: table-header-group;
    background-color: #ddd;
}

.rTableCell, .rTableHead {
    display: table-cell;
}

.rTableHeading {
    display: table-header-group;
    background-color: #ddd;
    font-weight: bold;
}

.rTableFoot {
    display: table-footer-group;
    font-weight: bold;
    background-color: #ddd;
}

.rTableBody {
    display: table-row-group;
}

.weatherForcastContentCell {
    height: 100px;
    width: 150px;
    text-align: center;
    background-color: #FFFFFF66;
}

.weatherForcastGradeCell {
    height: 40px;
    width: 150px;
    text-align: center;
}

整行应排成一行，但每行的第一个单元格似乎在其上方都有一行。

我尝试了一些技巧，例如使HTML单行显示，即删除标记之间的空格，但仍然没有运气。