IE7 Div создание таблицы - PullRequest
Новая
       26

IE7 Div создание таблицы

0 голосов
/ 15 апреля 2011

Только в 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;
}

Ответы [ 4 ]

1 голос
/ 15 апреля 2011

Почему бы вам просто не использовать таблицу вместо div?

Если вы посмотрите на эту таблицу , вы увидите, что IE7 не поддерживает "таблицу". Я предлагаю вам попытаться решить проблему с помощью « float ».

1 голос
/ 15 апреля 2011

Там действительно нет проблем с отображением табличных данных в таблице.Это точка таблицы.Не думайте, что вам нужно отображать данные в тегах div.

1 голос
/ 15 апреля 2011

Строки и столбцы логически связанных данных принадлежат таблице . DIVs - неподходящий инструмент для работы.

Хотя нам всем сказано не использовать ТАБЛИЦЫ, это относится только к использованию их для макетов. Сетка - это не макет, это таблица.

0 голосов
/ 15 апреля 2011

IE до IE8 не поддерживает отображение: таблица *

Даже не пытайтесь.Это не сработает.

...