Tạo bảng html với số lượng cột mở rộng động để vừa với kích thước màn hình

Question

Tôi có danh sách dữ liệu dài (ví dụ: nói Hoa và Chữ viết tắt của chúng) Tôi muốn hiển thị trong bảng HTML. Thay vì hiển thị dữ liệu trong bảng 2 x 50, tôi muốn nó gọn hơn cho màn hình lớn hơn (do đó người dùng không có cuộn lên xuống nhiều nhưng vẫn không phải cuộn theo chiều ngang)

Vì vậy, điều này sẽ phát triển động:

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

tới:

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

hay này:

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

vv ....

Tùy thuộc vào chiều rộng màn hình.

Tôi đang làm điều này trong ứng dụng Rail 3 với jQuery vì vậy tôi thích giải pháp jQuery nhưng mở cho bất kỳ ý tưởng nào.

Answer 1

Không tìm thấy giải pháp có sẵn nhưng chức năng này sẽ thực hiện thủ thuật!

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

Đây là bản trình diễn của giải pháp không có tableless. Nó hiện chỉ được thiết lập để sắp xếp các cột trên tải trang và sẽ có một số bổ sung nhỏ để xử lý thay đổi kích cỡ.

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

Nó dựa trên một mảng json tôi đã có với mảng tìm kiếm như:

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

Các html có thể được gửi đến trang web mà không cần phải phân tích json, sự khác biệt nhỏ trong việc độ dài của danh sách nhà nước là cần thiết

HTML:

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

CSS :(rất cơ bản)

.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

Tuỳ theo yêu cầu trình duyệt và tầm quan trọng của các tiêu đề cột là dành cho bạn css3 có một tài sản css cột chiều rộng, bạn có thể thiết lập. (Tiền tố -webkit và -moz hiện đang được yêu cầu.)