IE8 не изменяет размер тела или объекта, когда столбец скрыт в таблице с макетом таблицы: исправлено - PullRequest
Новая
       19

IE8 не изменяет размер тела или объекта, когда столбец скрыт в таблице с макетом таблицы: исправлено

8 голосов
/ 16 апреля 2010

IE 8 делает что-то очень странное, когда я скрываю столбец в таблице с разметкой таблицы: исправлено. Столбец скрыт, элемент таблицы остается той же ширины, но элементы tbody и thead не меняются, чтобы заполнить оставшуюся ширину. Работает в режиме IE7 (и FF, Chrome и т. Д. Конечно). Кто-нибудь видел это раньше или знает об обходном пути?

Вот моя тестовая страница - переключите первый столбец и используйте консоль разработчика, чтобы проверить таблицу, tbody и ширину thead: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>bug</title>
    <style type="text/css">
      table {
        table-layout:fixed; 
        width:100%;
        border-collapse:collapse;
      }
      td, th {
        border:1px solid #000;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th id="target1">1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td id="target2">1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
    </table>
    <a href="#" id="toggle">toggle first column</a>
    <script type="text/javascript">
      function toggleFirstColumn() {
        if (document.getElementById('target1').style.display=='' ||
            document.getElementById('target1').style.display=='table-cell') {
          document.getElementById('target1').style.display='none';
          document.getElementById('target2').style.display='none';
        } else {
          document.getElementById('target1').style.display='table-cell';
          document.getElementById('target2').style.display='table-cell';
        }
      }
      document.getElementById('toggle').onclick = function(){ toggleFirstColumn(); return false; };
    </script>
  </body>
</html>

Ответы [ 2 ]

14 голосов
/ 21 мая 2011

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

table.style.display = "inline-table";
window.setTimeout(function(){table.style.display = "";},0);

Авторы: я впервые прочитал об этой технике из блога Сриканта . И для справки: обновленный пример с использованием этой техники.

Я должен отметить, однако, что эта техника не всегда работает. Я вижу случай в более сложном приложении, в котором без изменений стиля я могу убедить IE принять во внимание, что количество столбцов изменилось (извините, у меня нет более простого воспроизводимого случая). К счастью для нас, IE9 полностью решает эту проблему.

0 голосов
/ 16 апреля 2010

Только что нашел неприятный хак - выберите видимый столбец, который должен заполнить пустое пространство, и присвойте ему класс "colspanfix". Вызовите эту функцию после переключения другого столбца (для краткости используйте jquery): 

function fixColspans(tableId) {
  if ($('#' + tableId).width() > $('#' + tableId + ' tbody').width()) {
    var current = $('#' + tableId + ' .colspanfix').attr('colspan');
    $('#' + tableId + ' .colspanfix').attr('colspan', ++current);
  }
}

Он проверяет, шире ли элемент таблицы, чем элемент tbody, затем присваивает значение colspan элементам с классом «colspanfix». Кикер заключается в том, что он должен увеличить colspan на единицу для каждого скрытия / шоу. Не очень красиво, но это работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...