Как заставить IE7 правильно распечатать <table>со столбцами, скрытыми CSS? - PullRequest
Новая
       24

Как заставить IE7 правильно распечатать <table>со столбцами, скрытыми CSS?

1 голос
/ 03 марта 2010

Обратите внимание, что это только проблема в Internet Explorer версии 7 и ниже. Вот тупая версия моего HTML: 

<table>

<colgroup>
<col width="20" class="hidden_col" />
<col width="50" />
<col />
</colgroup>

<tr>
<td class="hidden_col"><input type="checkbox" /></td>
<td>Title</td>
<td>Longer Description</td>
</tr>

</table>

Затем я включаю таблицу стилей "print", например: 

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

И эта таблица стилей включает в себя следующее: 

.hidden_col {
    display: none;
}

Теперь почти во всех других браузерах, включая IE8, все работает отлично. На экране вы видите этот первый столбец, а в режиме предварительного просмотра - нет. Но по какой-то причине IE7 ведет себя очень странно. Конечно, он отображает все нормально на экране, но когда вы переходите к предварительному просмотру печати в IE7, единственное, что отображается, это «Более подробное описание». Другими словами, он скрывает этот первый столбец, а также второй столбец. Как мне заставить это работать во всех браузерах?

Ответы [ 3 ]

1 голос
/ 03 марта 2010

Вы не можете скрыть один элемент таблицы, элементы внутри таблицы могут использовать только те свойства отображения CSS, которые начинаются с 'table-', по крайней мере, они только должны. См. это для получения дополнительной информации.

Редактировать: Я предполагаю, что ваша проблема - просто сбой в использовании свойств, которые вы не должны использовать.

0 голосов
/ 03 марта 2010

В итоге я просто указал ширину самих ячеек и больше не использовал <colgroup>. На мой взгляд, это не идеал, поэтому я оставлю этот вопрос открытым на некоторое время, если кто-нибудь сможет найти лучшее решение, но оно сработало. Вот мой последний HTML: 

<table>

<tr>
<td width="20" class="hidden_col"><input type="checkbox" /></td>
<td width="50">Title</td>
<td>Longer Description</td>
</tr>

</table>
0 голосов
/ 03 марта 2010

Попробуйте это: (не проверено) 

td .hidden_col{
    display: none;
}

по какой-то причине в режиме печати в некоторых браузерах может быть продолжение со стилями CSS в режиме печати. ​​

...