将html表转换为div但单元格和内容不对齐

Question

我试图制作带有圆角边缘的div表，但是细胞和桌眉的div不对齐，描述中的文字也没有完全显示出来。

/*
Div table
*/

.rTable {
    width: 70%;
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
    }

.rTableHeading, .rTableFoot {
    clear: both;
    background-color:#c3dde0;
    }

.rTableBody {
    clear: both;
}

.rTableRow {
    clear: both;
    display:inline-block;
    overflow: no-scroll;
    background-color:#d4e3e5;
}

.rTableHead, .rTableFoot{
    background-color:#c3dde0;
    border-width: 0px;
    padding: 6px;
    border-style: solid;
    border-color: #a9c6c9;      
    font-weight: bold;
    width:10%;
    } 

.rTableCell {
    background-color: transparent;
    width: 10%;
    border-width: 1px;
    padding: 5px;
    border-style: solid;
    opacity: 0.5;
    border-color: #a9c6c9;
}

.rTableDescCell {
    width:10%;
}

.rTableCell, .rTableHead {
    float: left;    
    height: 20px;       
    overflow: hidden; 
    padding: 1px 1.8%;      
    width: 10%; 
    } 

这将显示在html视图中，如下所示：

        <div class="rTable">
        <div class="rTableHeading roundEdgeTop">
            <div class="rTableHead">
                Date
            </div>
            <div class="rTableHead">
                Min
            </div>
            <div class="rTableHead">
                Max
            </div>
            <div class="rTableHead">
                Humidity
            </div>
            <div class="rTableHead">
                Description
            </div>
            <div class="rTableHead">
                Sunrise
            </div>
            <div class="rTableHead">
                Sunset
            </div>                  
        </div>
        <div class="rTableBody">
        {% for day in forcast_list %}
            <div class="rTableRow" onmouseover="this.style.backgroundColor='#ffff66';"onmouseout="this.style.backgroundColor='#d4e3e5';" >
            {% for n in range(7) %}
                <div class="rTableCell">
                    {{day[n]}}
                </div>
            {% endfor %}            
            </div>
        {% endfor %}
        </div>
    </div>