Aligning columns in DIV table

Question

CSS:

div {
    border:1px solid;
}
.divtable {
    display:table;
}
.divrow {
    display:table-row;
}
.divcol {
    display:table-cell;
    width:100px;
}
.headrow {
    display:table-caption;
}
.content {
    display:table-cell;
    width:100px;
}

Html:

<form id="form1" runat="server">
<div class="divtable">
    <div class="headrow">
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Hostname</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">IP Address</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Acknowledged</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Date Discovered</div>
        <div class="divcol" style="background-color:grey; overflow:hidden;" onmouseover="this.bgColor='green'">Select</div>
    </div>
    <div class="divrow">
        <div class="content">johndoelaptop1.corp.testcompany.com</div>
        <div class="content">10.1.1.10</div>
        <div class="content">Y</div>
        <div class="content">2013-10-21</div>
        <div class="content"><input type='checkbox' name ='chk1' /></div>
    </div>
    <div class="divrow">
        <div class="content">alicelaptop1.corp.testcompany.com</div>
        <div class="content">10.1.1.10</div>
        <div class="content">Y</div>
        <div class="content">2013-10-21</div>
        <div class="content"><input type='checkbox' name ='chk1' /></div>
    </div>
    <div class="divrow">
        <div class="content">boblaptop1.corp.testcompany.com</div>
        <div class="content">10.1.1.10</div>
        <div class="content">Y</div>
        <div class="content">2013-10-21</div>
        <div class="content"><input type='checkbox' name ='chk1' /></div>
    </div>
</div>

Can some explain to me how I can get each column to line up correctly so that column 1 Row2 isn't spilling into column2 row 2.

For example:

Hostname IPAddress Acknowledged Date Discovered Select

1bclw050821.corp.wsfsbank.com 10.1.1.10 Y 2013-10-21

Answer 1

Don't use table-caption for your header row. It is a row, use table-row:

.headrow{
    display:table-row;
}

http://jsfiddle.net/jLGyF/