Отображение уже скрытых ячеек таблицы в IE с помощью CSS

IE 7 не отображает изначально скрытые ячейки таблицы (class="c"), когда класс содержащего div изменен на "b", где правило "display:none" удалено. Однако это должно происходить так же, как и для строки (class="r"). Другие браузеры ведут себя корректно. Похоже на ошибку IE. Кто-нибудь сталкивался с этой проблемой раньше? Любые решения?

<html>
<head><style type="text/css">
.a .c { display: none; }
.a .r { display: none; }
.b .c { display: block; } /*Edited after comments, still not working*/
.b .r { display: block; } /*Edited after comments, still not working*/
</style></head><body>
<div class="a">
    <table>
        <tr>
            <td>11</td>
            <td class="c">12</td>
            <td>13</td>
        </tr>
        <tr>
            <td>21</td>
            <td class="c">22</td>
            <td>23</td>
        </tr>
        <tr class="r">
            <td>31</td>
            <td class="c">32</td>
            <td>33</td>
        </tr>
    </table>
</div><button onclick="document.getElementsByTagName('div')[0].className = 'b'">Change class</button></body></html>

PS: я пытаюсь найти решение только для CSS.


css internet-explorer html-table css-tables
person Community    schedule 15.07.2009    source источник

Ответы (4)


arrow_upward
2
arrow_downward

Вам нужно использовать display: table-cell; или display: table-row; в отдельном классе для тегов <td> и <tr> соответственно.

Это не будет работать в IE6/7, поэтому есть 2 другие альтернативы:

  1. Вложите тег <span> и вместо этого используйте свойство display: (none|block) в CSS.
  2. Используйте text-indent: (-9999em|0), чтобы вывести текст за пределы экрана.
person Will Morgan    schedule 15.07.2009
comment
К сожалению, это не работает. IE 7 их тоже не поддерживает. Я опустил их для кросс-браузерной совместимости, так что мне не нужно проверять, чтобы назначить «блок» (для IE) или «ячейка таблицы» (для других), и позволить браузерам назначать любое необходимое значение. Спасибо за Ваш ответ. - person ; 15.07.2009
comment
Из любопытства попробуйте использовать идентификаторы вместо классов для идентификатора div. - person Will Morgan; 15.07.2009
comment
Кроме того, используя: ‹td›‹span class=c›32‹/span›‹/td› в качестве обходного пути. Лишний код, но кроссбраузерный. - person Will Morgan; 15.07.2009
comment
Обтекание содержимого с помощью обходного пути span похоже на работу, когда таблица использует свернутые границы. Ницца. Но для этого требуются некоторые изменения в моем приложении, которые я бы предпочел сделать в крайнем случае, если не будет найдено решение только для CSS. Спасибо еще раз. (Использование ID не имело никакого значения.) - person ; 15.07.2009
comment
Учитывая, что отображение — это единственный правильный способ скрыть или показать что-то (хотя вы можете использовать text-indent: -9999em, чтобы скрыть что-то, 0em, чтобы показать), я думаю, что использование интервала может быть вашим лучшим выбором на данный момент. - person Will Morgan; 15.07.2009

arrow_upward
1
arrow_downward

Это своего рода несоответствие браузера, для которого отлично подходит jQuery.

<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('td.c').hide();
        $('tr.r').hide();

        $('button').click(function(){
            $('td.c').show();
            $('tr.r').show();
        });
    });
</script>

И измените свою кнопку на

<button>Change class</button>
person Emily    schedule 15.07.2009
comment
Я согласен; вы также можете использовать его для удаления класса a и добавления b, если этого хочет OP. - person jeroen; 15.07.2009
comment
Таблица должна отображаться со скрытыми первыми столбцами. CSS также работает, когда таблица отображается с этими столбцами, видимыми при загрузке документа, а затем переключается. На самом деле я могу сделать это с помощью javascript, изменяющего правила css (настройка немного отличается от настроек в этом примере). Однако решение на чистом CSS было бы намного проще и идеально подходило для моего случая. Мне нужно только позаботиться об IE для этого метода. Спасибо. - person ; 15.07.2009
comment
Как я уже сказал, просто удалите класс a и добавьте класс b, никаких изменений в вашем css и html не требуется. - person jeroen; 15.07.2009
comment
@jeroen, без сценария (требование), как строки и ячейки будут изначально скрыты, если классы a и b будут удалены? Я упускаю что-то очевидное? - person ; 15.07.2009
comment
А, я понимаю вашу точку зрения. Но классы а и б обязательны. Они используются для обозначения активного состояния фильтра (например, a = показывать отрицательные значения, b = показывать положительные значения). - person ; 15.07.2009
comment
Код можно (и нужно) упростить до: $('.c, .r').hide(); и $('.c, .r').show(), где вы повторяете дважды. - person Will Morgan; 15.07.2009

arrow_upward
0
arrow_downward

Оба ваших класса b нуждаются в display: block; FWIW display: table-cell, а display: table-row следует использовать, чтобы нетабличные элементы вели себя как таблицы. Также я не уверен, что table-cell и table-row поддерживаются последовательно в разных браузерах.

Изменить: я не уверен, что здесь возможно чистое решение CSS. Обычно я использую javascript для сброса свойства отображения на «» (пустая строка). Это позволяет каждому браузеру делать то, что он считает правильным, чтобы снова отобразить элементы таблицы. Извините, я не мог больше помочь.

person Community    schedule 15.07.2009
comment
Я отредактировал пример кода, чтобы избежать дальнейшей путаницы. Однако по-прежнему не работает. Спасибо за Ваш ответ. - person ; 15.07.2009

arrow_upward
0
arrow_downward

Я не уверен в достоверности, но если вы просто хотите, чтобы это работало, попробуйте заменить display: block; с дисплеем: ''; Это сработало для меня.

person Community    schedule 21.07.2009