Ширина столбца GridView - как прекратить поведение «сжиматься до нуля»

Question

В настоящее время я пытаюсь реализовать GridView с замороженным заголовком. Я получил заголовок, замороженный, используя javascript, найденный онлайн. Вот код:

var GridId = "<%=dgContacts.ClientID %>"; 
    var ScrollHeight = 180; 
    var ScrollWidth = 700; 
    window.onload = function() { 
     enablePostLog(); 
     var grid = document.getElementById(GridId); 
     var gridWidth = grid.offsetWidth; 
     var headerCellWidths = new Array(); 
     for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) { 
      headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth; 
     } 
     grid.parentNode.appendChild(document.createElement("div")); 
     var parentDiv = grid.parentNode; 

     var table = document.createElement("table"); 
     for (i = 0; i < grid.attributes.length; i++) { 
      if (grid.attributes[i].specified && grid.attributes[i].name != "id") { 
       table.setAttribute(grid.attributes[i].name, grid.attributes[i].value); 
      } 
     } 
     table.style.cssText = grid.style.cssText; 
     table.style.width = gridWidth + "px"; 
     table.style.tableLayout = "fixed"; 
     table.appendChild(document.createElement("tbody")); 
     table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]); 
     var headerRow = table.getElementsByTagName("TH"); 

     var gridRow = grid.getElementsByTagName("TR")[0]; 
     for (var i = 0; i < headerRow.length; i++) { 
      var width; 
      if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) { 
       width = headerCellWidths[i]; 
      } 
      else { 
       width = gridRow.getElementsByTagName("TD")[i].offsetWidth; 
      } 
      headerRow[i].style.width = parseInt(width - 3) + "px"; 
      gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px"; 
     } 
     parentDiv.removeChild(grid); 

     var dummyHeader = document.createElement("div"); 
     dummyHeader.setAttribute('id', 'divHeader'); 
     dummyHeader.style.cssText = "margin-left: auto; margin-right: auto; overflow: hidden; width: " + ScrollWidth + "px"; 
     dummyHeader.appendChild(table); 
     parentDiv.appendChild(dummyHeader); 
     var scrollableDiv = document.createElement("div"); 
     gridWidth = parseInt(gridWidth) + 17; 
     scrollableDiv.setAttribute('id', 'divBody'); 
     scrollableDiv.style.cssText = "margin-left: auto; margin-right: auto; overflow: auto; height: " + ScrollHeight + "px; width: " + ScrollWidth + "px"; 
     scrollableDiv.appendChild(grid); 
     scrollableDiv.onscroll = scrollHeader; 
     parentDiv.appendChild(scrollableDiv); 
    } 

    function scrollHeader() { 
     var header = document.getElementById('divHeader'); 
     var body = document.getElementById('divBody'); 
     header.scrollLeft = body.scrollLeft; 
    } 

Проблема, с которой я столкнулась, заключается в том, что GridView находится в div с фиксированной шириной. Стили ширины, добавленные в столбцы, игнорируются.

Окончательный HTML выглядит следующим образом: http://i.stack.imgur.com/xDzez.png

Фактическая таблица оказываемых выглядит следующим образом (проблема наиболее заметно в «View» и «Notify» столбцы): http://i.stack.imgur.com/rA35z.png

Если бы я удалите фиксированную ширину на внешнем div, ширина столбца исправит себя, но, очевидно, я теряю свою прокрутку. Кажется, он пытается сжать пробелы в ячейках таблицы, чтобы попытаться вписаться в div. Это не обязательно из-за overflow: auto на внешнем div. Есть ли стиль или что-то, что я могу добавить, чтобы остановить браузер от этого?

Answer 1

Оказалось, что мне нужны были table-layout: fixed И width: 100% для обеих столов. Я попробовал решение для размещения таблиц, но не понял, что ширина должна быть на 100%.

Final Javascript:

var GridId = "<%=dgContacts.ClientID %>"; 
    var ScrollHeight = 180; 
    var ScrollWidth = 700; 
    window.onload = function() { 
     enablePostLog(); 


     var grid = document.getElementById(GridId); 
     var gridWidth = grid.offsetWidth; 
     var headerCellWidths = new Array(); 
     for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) { 
      headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth; 
     } 
     grid.parentNode.appendChild(document.createElement("div")); 
     var parentDiv = grid.parentNode; 

     var table = document.createElement("table"); 
     for (i = 0; i < grid.attributes.length; i++) { 
      if (grid.attributes[i].specified && grid.attributes[i].name != "id") { 
       table.setAttribute(grid.attributes[i].name, grid.attributes[i].value); 
      } 
     } 
     table.style.cssText = grid.style.cssText; 
     table.appendChild(document.createElement("tbody")); 
     table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]); 
     var headerRow = table.getElementsByTagName("TH"); 

     var gridRow = grid.getElementsByTagName("TR")[0]; 
     for (var i = 0; i < headerRow.length; i++) { 
      var width; 
      if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) { 
       width = headerCellWidths[i]; 
      } 
      else { 
       width = gridRow.getElementsByTagName("TD")[i].offsetWidth; 
      } 
      gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px"; 
      if (i == headerRow.length - 1) { 
       width = width + getScrollBarWidth(); 
      } 
      headerRow[i].style.width = parseInt(width - 3) + "px"; 
     } 
     parentDiv.removeChild(grid); 
     grid.style.tableLayout = "fixed"; 
     table.style.tableLayout = "fixed"; 
     grid.style.width = "100%"; 
     table.style.width = "100%"; 
     var dummyHeader = document.createElement("div"); 
     dummyHeader.setAttribute('id', 'divHeader'); 
     dummyHeader.style.cssText = "margin-left: auto; margin-right: auto; overflow: hidden; width: " + ScrollWidth + "px"; 
     dummyHeader.appendChild(table); 
     parentDiv.appendChild(dummyHeader); 
     var scrollableDiv = document.createElement("div"); 
     scrollableDiv.setAttribute('id', 'divBody'); 
     scrollableDiv.style.cssText = "margin-left: auto; margin-right: auto; overflow: auto; height: " + ScrollHeight + "px; width: " + ScrollWidth + "px"; 
     scrollableDiv.appendChild(grid); 
     scrollableDiv.onscroll = scrollHeader; 
     parentDiv.appendChild(scrollableDiv); 
    } 

    function scrollHeader() { 
     var header = document.getElementById('divHeader'); 
     var body = document.getElementById('divBody'); 
     header.scrollLeft = body.scrollLeft; 
    } 

    function getScrollBarWidth() { 
     var inner = document.createElement('p'); 
     inner.style.width = "100%"; 
     inner.style.height = "200px"; 

     var outer = document.createElement('div'); 
     outer.style.position = "absolute"; 
     outer.style.top = "0px"; 
     outer.style.left = "0px"; 
     outer.style.visibility = "hidden"; 
     outer.style.width = "200px"; 
     outer.style.height = "150px"; 
     outer.style.overflow = "hidden"; 
     outer.appendChild(inner); 

     document.body.appendChild(outer); 
     var w1 = inner.offsetWidth; 
     outer.style.overflow = 'scroll'; 
     var w2 = inner.offsetWidth; 
     if (w1 == w2) w2 = outer.clientWidth; 

     document.body.removeChild(outer); 

     return (w1 - w2); 
    }