IE8 не изменяет размер tbody или thead, когда столбец скрыт в таблице с таблицей-layout:fixed

Question

IE8 не изменяет размер tbody или thead, когда столбец скрыт в таблице с таблицей-layout:fixed

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

Вот моя тестовая страница - переключает первый столбец и использует dev консоль для проверки таблицы, 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>

8

javascript internet-explorer-8 html-table toggle

задан Brian Tompsett - 汤莱恩 28 May 2017 в 13:43

1 ответ

Другие вопросы по тегам:

javascript internet-explorer-8 html-table toggle

Похожие вопросы:

score 0 · Answer 1

Только что нашел неприятный прием - выберите видимый столбец, который должен заполнить пустое пространство, и присвойте ему класс 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 на единицу для каждого скрытия / показа. Не очень красиво, но работает.