Creando una tabla html con número de columnas que se expande dinámicamente para adaptarse al tamaño de pantalla

Question

Tengo una larga lista de datos (por ejemplo, decir Estados y sus abreviaturas) Quiero mostrar en la tabla HTML. En lugar de mostrar los datos en una tabla de 2 x 50, me gustaría que fuera más compacto para pantallas más grandes (para que el usuario no tenga que desplazarse hacia arriba o hacia abajo tanto pero no tendrá que desplazarse horizontalmente)

dinámicamente:

 
State  | Ab 
------------------- 
Alabama  | AL 
Alaska  | AK 
Arizona  | AZ 
Arkansas | AR 
California | CA 
Colorado | CO 
Connecticut | CT 

a:

 
State  | Ab | State  | Ab | 
-------------------------------------- 
Alabama  | AL | California | CA | 
Alaska  | AK | Colorado | CO | 
Arizona  | AZ | Connecticut | CT | 
Arkansas | AR | 

o esto:

 
State  | Ab | State  | Ab | State  | Ab | 
--------------------------------------------------------- 
Alabama  | AL | Arkansas | AR | Colorado | CO | 
Alaska  | AK | California | CA | Connecticut | CT | 
Arizona  | AZ | 

etc ....

Según el ancho de la pantalla.

Estoy haciendo esto en la aplicación Rail 3 con jQuery, así que prefiero la solución jQuery pero estoy abierto a cualquier idea.

Answer 1

No se pudo encontrar una solución lista para usar, pero esta función debería ser la solución.

/* 
This function will create a table with fixed `COL_WIDTH' (default=150 px) 
that uses as many columns as can be fit into the HTML element with id `table_id'. 

A one-dimensional array of values to fill the table with should be passed in as 
`data'. 
*/ 
function fillScreenWithData(table_id, data, COL_WIDTH){ 
    if (!COL_WIDTH) COL_WIDTH = 150; 

    TABLE = $(table_id); 
    alert(TABLE); 
    TABLE_STRING = "<table>" 
    var doc_width = TABLE.width(); 
    var num_cols = Math.floor(doc_width/COL_WIDTH); 
    var num_rows = Math.ceil(data.length/num_cols); 

    for (var i = 0; i < num_rows; i++){ 
     TABLE_STRING += "<tr>"; 
     for (var j = 0; j < num_cols; j++){ 
      TABLE_STRING += "<td>"; 
      index = i + j*num_rows; 
      if (index < data.length) { 
       TABLE_STRING += data[index]; 
      } 
      TABLE_STRING += "</td>" 
     } 
     TABLE_STRING += "</tr>" 
    } 
    TABLE_STRING += "</table>" 
    TABLE.html(TABLE_STRING); 
} 

// probably fetch this JSON array of data with an AJAX request 
var data = ["Alabama", 
     "Alaska", 
     "Arkansas", 
     "California", 
     "Colorado", 
     "Connecticut", 
     "Extra Item", 
     ] 

// run the function on page load 
$(function(){fillScreenWithData("#table", data)}); 

Answer 2

Aquí hay una demostración de una solución sin tableta. Actualmente solo está configurado para organizar columnas en la carga de la página y tomaría algunas adiciones menores para el manejo de cambio de tamaño.

DEMO: http://jsfiddle.net/DPRsj/

Se basa en una matriz JSON que tuve con arreglo mirando como:

[{"state":"AK","name":"Alaska"}........] 

el código HTML podría ser enviado a la página sin necesidad de analizar JSON, diferencia menor en conseguir sería necesaria longitud de lista del estado

HTML:

<div id="state_wrap"> 
    <div id="state_header"></div> 
    <div id="state_list"></div> 
</div> 

CSS :(muy básico)

.state{ width:150px; border:1px solid grey; border-top:none} 
.st_name{ width: 120px;float:left} 
.st_ab{ width:30px; margin-left: 120px;} 
#state_header .state{ 
    font-weight:bold; 
    color:blue; 
    margin-right:10px; 
    width: 150px; 
    float:left; 
} 
.column{ width: 152px; float:left;margin-right:10px;} 

JS:

$(function() { 
    /* parse json to html*/ 
    var html = [];  
    $.each(states, function() { 
     html.push(stateContainer(this.name, this.state)); 
    });  
    html.push('<div style="clear:both"></div>');  
    $('#state_list').html(html.join('')) 
    /* END parse json to html*/ 

    var listW = 160, /* column width, including margin, set by css*/ 
     contW = $('#state_wrap').width(); 
    var num_cols = Math.floor(contW/listW) 
    /* create headings*/ 
    var topHtml = []; 
    for (i = 0; i < num_cols; i++) { 
     topHtml.push(stateContainer('State', 'Abr')) 
    } 

    $('#state_header').html(topHtml.join('')); 
    /*END create headings, START: create columns*/ 
    var start = 0, 
     end = 0; 
    var state_per_col = Math.floor(states.length/num_cols); 
    var $states = $('#state_list .state') 
    for (i = 0; i < num_cols; i++) { 
     start = end; 
     end = start + state_per_col + 1; 
     $states.slice(start, end).wrapAll('<div class="column"></div>') 
    } 
}); 

function stateContainer(name, abr) { 
    return '<div class="state"><div class="st_name">' + name + '</div><div class="st_ab">' + abr + '</div></div>'; 
} 

Answer 3

Dependiendo de los requisitos de navegador y lo importante son los títulos de las columnas para que CSS3 tiene una propiedad CSS column-width se puede establecer. (Se requieren los prefijos -webkit y -moz actualmente).