Ekran boyutuna sığacak şekilde dinamik olarak genişleyen sütun sayısına sahip bir html tablosu oluşturma

Question

Uzun bir veri listesi (örneğin, Birleşik Devletler ve Kısaltmaları) HTML tablosunda görüntülemek istiyorum. 2 x 50 tablodaki verileri görüntülemek yerine, daha büyük ekranlar için daha kompakt olmasını isterim (böylece kullanıcının yukarı ve aşağı doğru kaydırma yapmasına gerek kalmaz, ancak yatay olarak kaydırma yapmak zorunda kalmaz)

dinamik:

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

için:

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

veya bu:

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

vb.

Ekran genişliğine bağlı olarak.

jQuery ile Rail 3 uygulamasında bunu yapıyorum, bu yüzden jQuery çözümünü tercih ediyorum ancak herhangi bir fikre açık.

Answer 1

Hazır bir çözüm bulunamadı, ancak bu işlev hile yapmalıdır!

/* 
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

İşte tableless bir çözümün bir demosu. Yalnızca şu anda sayfa yükleme sütunları düzenlemek için ayarlanır ve yeniden boyutlandırma için bazı küçük eklemeler alır.

DEMO: Bu gibi bakıyor ben dizi vardı bir json dizide dayanıyor http://jsfiddle.net/DPRsj/

:

html almakla json, küçük fark ayrıştırmak gerek kalmadan sayfaya gönderilebilir

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

devlet listesinin uzunluğu ihtiyaç olacağını

HTML:

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

CSS :(çok temel)

.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

tarayıcı gereksinimlerine bağlı olarak ve ne kadar önemli sütun başlıkları, CSS3 içindir ayarlayabileceğiniz bir sütun genişliği css özelliği vardır. (-webkit ve -moz önekleri şu anda gereklidir.)