Переключение видимости внутри <table>в IE вызывает изменение размера <thead>ячеек, несмотря на фиксированную ширину - PullRequest
Новая
       11

Переключение видимости внутри <table>в IE вызывает изменение размера <thead>ячеек, несмотря на фиксированную ширину

1 голос
/ 22 июня 2011

Демонстрация скрипки доступна здесь: http://jsfiddle.net/r9MCW/5/

Функциональность

В принципе, у меня есть очень простая таблица с <thead> и двумя строками (всего 3).Нажатие на строку 2 переключает видимость содержимого в строке 3. Примерно так: 

<table width="100%" border="1" cellpadding="0" cellspacing="0">
<thead>
    <tr>
        <th style="width:60px;">A</th>
        <th style="width:50px;">B</th>
        <th style="width:40px;">C</th>
        <th style="width:30px;">D</th>
    </tr>
</thead>
<tr class="clickme">
    <td colspan="4">Click Me!</td>
</tr>        
<tr>
    <td colspan="4">
        <div class="target">
            Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet [...]
        </div>
    </td>
</tr>
</table>

Нажатие <tr class="clickme"> показывает / скрывает <div class="target"> с помощью некоторого очень простого jQuery с использованием функции toggle().

Проблема

IE7, IE8 и IE9 каждый раз изменяют размеры <th> ширины каждый раз, когда запускается тумблер.Вижу скрипку.Как я могу предотвратить это?

Ответы [ 3 ]

1 голос
/ 22 июня 2011

Это потому, что ваша ширина TH не составляет 100% ширины таблицы.

Есть два способа сделать это:

  • Изменить ширину TH на проценты и сделать так, чтобы они увеличивались до 100%
  • Изменить ширину таблицы на наборширина в пикселях и сделать ширину TH в сумме
0 голосов
/ 22 июня 2011

кажется, что ширина тэга контента изменялась при переключении в ie. Придание этой переменной стабильного значения (например, 100%) решит проблему. 

<td width="100%" colspan="4">
        <div class="target">
            Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet [...]
        </div>
 </td>
0 голосов
/ 22 июня 2011

Когда вы используете пиксели для размера, это просто рекомендация и минимум.Когда таблица шире, чем 180px, она будет распределять дополнительное пространство любым удобным для нее способом.

Если вы хотите указать ширину, именно ширину ячеек необходимо добавить к ширине таблицы.Поскольку вы используете проценты для видимости таблицы, вы должны также использовать проценты для ширины ячеек:

http://jsfiddle.net/r9MCW/13/

...