I was trying to make div table with round edges of top corners, but divs of cells and table brow do not line up and text in description doesnt show up completely.
/*
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%;
}
this is displayed in html view as shown below:
<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>