0

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.

enter image description here

/*
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>
Ciasto piekarz
  • 7,853
  • 18
  • 101
  • 197
  • floated elements don't behave as table row/cell. what are you trying to do? – Dekel Aug 26 '17 at 13:27
  • 3
    Short answer is: **do not do the conversion**. This is one of the few legitimate cases where `` should actually be used, instead of `
    `s. [`
    ` elements do support border-radius](https://stackoverflow.com/questions/10666573/border-radius-of-table-is-not-working). You are presenting tabulated data, so use the correct tag designed specifically for the purpose. If you're adamant about using `
    `, look into `display: table`.
    – Terry Aug 26 '17 at 13:27
  • removing `float: left;` messes up things big time. – Ciasto piekarz Aug 26 '17 at 13:29
  • yea make sense, I will keep the html table tag however I do not know why it is pushed to make use of div based tables instead of html table. – Ciasto piekarz Aug 26 '17 at 13:34