Ошибка HTML-таблицы CSS в IE

Question

У меня возникла проблема с таблицами в IE 9/10/11. Я проверил следующий код, используя Firefox, Chrome и зло IE. На jsfiddle jsbin все работает отлично в каждом браузере. Однако, когда я проверить этот код на мой HTTP-сервер (проверено на LightTPD и питона SimpleHTTPServer) таблица отображается неправильно:

var cell = $('#main tr').eq(1).find('td').eq(1); 
 
cell.attr('class', 'block'); 
 
cell.css('height', '80'); 
 
cell.css('width', '40');

.tg { 
 
    border-collapse: collapse; 
 
} 
 
.tg td { 
 
    height: 20px; 
 
    width: 20px; 
 
    border: 1px solid grey; 
 
    padding: 0; 
 
} 
 
.tg .block { 
 
    position: absolute; 
 
    padding: 0; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="main" class="tg"> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
</table>

Answer 1

Проблему можно увидеть в IE -7 и ниже. Проблема вызвана следующим образом:

<TD class=block style="HEIGHT: 80px; WIDTH: 40px" class="block"></TD> 

Кроме того, вы установили position:absolute на этой ячейке. Другие браузеры, похоже, терпимы к этому, но IE < 8 отключается.

Чтобы получить представление о вас, используйте rowspan и colspan, или оверлей.

Вот правильный способ кросс-браузер:

.tg { 
 
    border-collapse:collapse; 
 
    table-layout: fixed; 
 
} 
 
.tg td { 
 
    height:20px; 
 
    width:20px; 
 
    border: 1px solid grey; 
 
    padding: 0; 
 
} 
 
td.hilite { 
 
    padding: 0; 
 
    background: red; 
 
}

<table id="main" class="tg"> 
 
    <tr> 
 
     <td></td><td></td> 
 
     <td></td><td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td colspan="2" rowspan="4" class="hilite">h</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td><td></td><td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td><td></td><td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td><td></td><td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td><td></td> 
 
     <td></td><td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td><td></td> 
 
     <td></td><td></td> 
 
     <td></td> 
 
    </tr> 
 
</table>