IE7 Div creating table

Only in IE does this not work, it displays the cells stacked vertically on top one another? Is there anyway to fix this so that IE7 will display it like a table?

<div class="table" style="width: 1100px; margin-top: 5px;";>
    <div class="tr header">
    <div class="td" style="width: 2%"></div>
    <div class="td" style="width: 2%;"></div>
    <div class="td" style="width: 14%;">Name</div>
    <div class="td" style="width: 15%;">Company</div>
    <div class="td" style="width: 9%;">Type</div>
    <div class="td" style="width: 13%;">Phone</div>
    <div class="td" style="width: 21%;">Email</div>
    <div class="td" style="width: 17%;">City/State</div>
    <div class="td" style="width: 8%;">Region</div>
    </div>

    <div class="tr">
    <div class="td"><input type="image" name="Contacts1$rep$ctl01$imgdelbtn" id="Contacts1_rep_ctl01_imgdelbtn" src="images/del.png" style="border-width:0px;" /></div>
    <div class="td"><a href="EContact.aspx?id=25"><img alt="" src="images/edit.png" style="width: 16px; height: 16px" /></a></div>
    <div class="td"><a href="Uss.aspx?id=25">Bob&nbsp;Smith</a></div>
    <div class="td"><a id="Contacts1_rep_ctl01_CompanyLnkBtn" href="javascript:__doPostBack('Contacts1$rep$ctl01$CompanyLnkBtn','')">Ops</a></div>
    <div class="td">User</div>
    <div class="td">555-555-5555</div>
    <div class="td"><a href='mailto:ops@ops.com'>ops@ops.com</a></div>
    <div class="td">Ops&nbsp;HI</div>
    <div class="td">Midwest</div>
    </div>

    <div class="tr" style="background-color: #F0F0F0">
    <div class="td"><input type="image" name="Contacts1$rep$ctl02$imgdelbtn" id="Contacts1_rep_ctl02_imgdelbtn" src="images/delete.png" style="border-width:0px;" /></div>
    <div class="td"><a href="E.aspx?id=78"><img alt="" src="images/edit.png" style="width: 16px; height: 16px" /></a></div>
    <div class="td"><a href="Uss.aspx?id=78">Bob&nbsp; Stevens</a></div>
    <div class="td"><a id="Contacts1_rep_ctl02_CompanyLnkBtn" href="javascript:__doPostBack('Contacts1$rep$ctl02$CompanyLnkBtn','')">ABC CO</a></div>
    <div class="td">User</div>
    <div class="td">000.000.0000</div>
    <div class="td"><a href='mailto:test@test.com'>test@test.com</a></div>
    <div class="td">OHHNO&nbsp;CA</div>
    <div class="td">Midwest</div>
    </div>
    </div>

CSS:

div.table 
{
    border: 1px solid #808080; 
    display: table;
}
div.tr 
{
    border: 1px solid #808080; 
    display: table-row;
}
div.td 
{
    border: 1px solid #808080; 
    display: table-cell; 
    height: 25px; 
    padding-left: 5px; 
    padding-right: 5px;
    vertical-align: middle ;
}
div.header 
{
    background-color: #E0E0E0; 
    font-weight: bold;
}

Solution

Rows and columns of logically-associated data belong in a table. DIVs are the wrong tool for the job.

While we've all be told not to use TABLEs, that only applies to using them for layouts. A grid is not a layout, it is a table.