Скрытие столбцов таблицы с javascript - динамическая настройка макета

Question

Как часть моего отзывчивого дизайна, я пытаюсь динамически скрыть столбики таблицы, если размер области просмотра сжимается мимо определенной точки. Я попытался установить .style.visibility = "collapse" для всех <tr> элементов и .style.opacity = "0" для всех <td> элементов. Затем мне нужно скрыть background таблицы, чтобы она не показывала, что ширина таблицы все еще существует, а также увеличивая width таблицы (160%), чтобы оставшиеся столбцы заполнили экран.

Хотя это действительно работает на Chrome, Firefox, IE (в том числе ie8!) И моих мобильных браузерах, кажется, это смешной клоунский хак. Любые другие предложения?

var jmq = window.matchMedia("screen and (max-width: 610px)"); 
    jmq.addListener(jmqListener); 

    function jmqListener(jmq){ 
     var colTitle = getElementsByClassName('col-title'); 
     var colName = getElementsByClassName('col-name'); 
     var colDate = getElementsByClassName('col-date'); 
     var colFb = getElementsByClassName('col-fb'); 
     var table = getElementsByClassName('default'); 

     if (jmq.matches || window.innerWidth < 611) { 
      //Mobile 
      ... resize controls 
      // hide table columns 
      if (colName !== null){ 
       for(var i=0,j=colName.length; i<j; i++){ 
        colName[i].style.visibility = "collapse"; 
        colName[i].style.opacity = "0"; 
       } 
      } 
      // HACK - increase table width and hide the background which would show the reserved table space 
      if (table !== null){ 
       for(var i=0,j=table.length; i<j; i++){ 
        table[i].style.width = "160%"; 
        table[i].style.background = "transparent"; 
       } 
      } 
     } 
     else { 
      // Desktop 
      ... restore control layout for desktop 
      // restore table column(s) 
      if (colName !== null){ 
       for(var i=0,j=colName.length; i<j; i++){ 
        colName[i].style.visibility = "visible"; 
        colName[i].style.opacity = "100"; 
       } 
      } 
      if (table !== null){ 
       for(var i=0,j=table.length; i<j; i++){ 
        table[i].style.width = "100%"; 
        table[i].style.background = "#C8C8C8"; 
       } 
      } 
     }  
    } 

function getElementsByClassName(className) { 
    if (document.getElementsByClassName) { 
     return document.getElementsByClassName(className); } 
    else { 
     return document.querySelectorAll('.' + className); 
    } 
} 

Answer 1

Я хотел бы изменить свой цикл:

for(var i=0; i<colName.length; i++){ 
    colName[i].style.display = "none"; 
} 

Примечание Ваш j переменная полностью излишни.

В MDN docs для visibility вы найдете:

коллапс
Для строк таблицы, столбцы, группы столбцов и строк групп строк (s) или столбца (ов), скрыты и пространство, которое они заняли, будет удалено (как будто отображение: ни один не был применен к столбцу/строке таблицы). Тем не менее, размер других строк и столбцов по-прежнему вычисляется так, как если бы ячейки в свернутой строке (строках) или столбцах (столбцах) присутствовали. Это было предназначено для быстрого удаления строки/столбца из таблицы без необходимости пересчитывать ширины и высоты для каждой части таблицы.

курсив мой

Раствор выше, по существу, использовать display: none

Answer 2

Попробуйте использовать CSS3 Media Queries.

E.g.

@media all and (max-width: 700px) { 
table, tr, td { 
    display: none; 
} 

Если ширина вашего устройства вид порта меньше или равна 700px выше display: none; будет использоваться, чтобы скрыть таблицу, Т.Р., тд, или что у вас.