Question

只有在IE中这不起作用，它会显示垂直堆叠在一起的单元格吗？有没有解决这个问题，以便IE7会像桌子一样显示它？

<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;
}

Answer 1

逻辑关联数据的行和列属于表。 DIV是这项工作的错误工具。

虽然我们都被告知不要使用TABLE，但这仅适用于将它们用于布局。网格不是布局，而是表格。

Answer 2

在表格中显示表格数据确实没有问题。这就是表格的要点。不要觉得你需要在div标签中显示数据。

Answer 3

为什么不简单地使用table而不是div？

如果查看this table，您会看到，IE7不支持“表格”。我建议您尝试使用“float”来解决问题。

Answer 4

IE8之前的IE不支持display：table *

甚至不要尝试。它不会起作用。

IE7 Div创建表

4 个答案: