画面サイズに合わせて動的に拡大する列数を持つhtmlテーブルを作成する

Question

私はHTMLテーブルに表示したいデータの長いリストを持っています（例：州とその略語）。 2 x 50のテーブルにデータを表示するのではなく、私は大画面でよりコンパクトにしたいと考えています（ユーザーはスクロールして上下にスクロールしなくても横にスクロールする必要はありません）

動的：

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

へ：

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

またはこの：

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

など....

画面の幅によって異なります。

私はjQueryを搭載したレール3アプリでこれをやっています。そのため、jQueryソリューションが好きです。

Answer 1

市販のソリューションは見つかりませんでしたが、この機能はこのトリックを行う必要があります。

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

ここでは、テーブルレスソリューションのデモです。これは現在、ページのロード時に列を配置するように設定されており、サイズ変更処理には若干の追加が必要です。

DEMO：HTMLは、JSONを解析するために必要とせずにページを得ることにマイナーな違いを送ることができ

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

：http://jsfiddle.net/DPRsj/

それは私が配列のように見えるとしていたJSON配列に基づいています状態リストの長さが必要とされるであろう

HTML：

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

CSS :(非常に基本的な）

.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

は、ブラウザの要件に応じて、どのように重要な列ヘッダーがあなたのためにしているCSS3を使用して、設定することができ、列幅のCSSプロパティを持っています。 （-webkitと-mozの接頭辞は現在必要です）