創建一個具有動態擴展列數以適合屏幕尺寸的html表格

Question

我想要在HTML表格中顯示長列表數據（例如說說狀態和縮寫）。而不是顯示在2×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 | 

etc ....

取決於屏幕寬度。

我在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：http://jsfiddle.net/DPRsj/

它基於JSON數組我與陣列上看起來像：

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

的HTML可以無需解析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前綴。）