2012-03-16 6 views
6

Tôi có đoạn mã sau:Làm thế nào để ngăn chặn một bảng từ co lại thành một khung nhìn

table { 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    padding: 0px; 
 
    border: 1px solid #d3d3d3; 
 
    width: 300px; 
 
    height: 100px; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
}
<table> 
 
    <tr> 
 
    <td>A</td> 
 
    <td>B</td> 
 
    <td>C</td> 
 
    </tr> 
 
    <tr> 
 
    <td>D</td> 
 
    <td>E</td> 
 
    <td>F</td> 
 
    </tr> 
 
    <tr> 
 
    <td>G</td> 
 
    <td>H</td> 
 
    <td>I</td> 
 
    </tr> 
 
</table>

Khi tôi căng trình duyệt để viewport nhỏ hơn 900px, hàng bảng của đang co để phù hợp với khung nhìn mặc dù thực tế là tôi đặt chiều rộng một cách rõ ràng. Làm thế nào tôi có thể ngăn chặn hành vi này?

+0

Đặt chiều rộng trên phần tử bảng. – Kyle

+0

Kính gửi chính xác những gì bạn muốn, bạn có thể chỉ định rõ ràng ... – w3uiguru

+0

Tôi muốn chiều rộng bảng bằng 900px mà không chỉ định rõ ràng (vì vậy tôi có thể thêm cột mới mà không cần cập nhật bảng định kiểu) –

Trả lời

2

tôi quản lý để tìm ra câu trả lời bản thân mình:

td { 
    padding: 0px; 
    border: 1px solid #d3d3d3; 
    min-width: 300px; 
    max-width: 300px; 
    width: 300px; 
    height: 100px; 
    text-align: center; 
    white-space: nowrap; 
} 
+0

Điều này, tuy nhiên chỉ hoạt động trong chrome. Quyết định sử dụng một cách tiếp cận khác cho cùng một vấn đề. –

+0

Dường như trong Firefox cũng hoạt động – diraria

2

e: Câu trả lời đã thay đổi.

Hi,

Kiểm tra này ra, nó sẽ tự động (ish) thiết lập chiều rộng của bảng

http://jsfiddle.net/joshuamartin/KtAny/

(function() { 
    var tdWidth = '300'; 


    var columnCount = $("#tID").find('tr')[0].cells.length; 
    var tableWidth = tdWidth * columnCount; 

    $("table#tID").attr('width', tableWidth); 

    // console.log(tableWidth); 
})(); 

Bạn cần phải nhập thủ công rộng td của bạn, bởi vì Tôi không thể tìm ra cách bạn có thể lấy kiểu CSS từ bảng định kiểu.

Một cái gì đó như this có thể giúp bạn nếu bạn muốn tất cả trở nên năng động, nhưng giải pháp này có vẻ hoạt động tốt. Tôi đã chia nhỏ nó thực sự khá nhiều, nhưng bạn có thể làm tất cả trong một dòng, chỉ với một biến tdWidth.

(function() { 
    var tdWidth = '300';  
    $("table#tID").attr('width', $("#tID").find('tr')[0].cells.length * tdWidth); 
})(); 
​ 
+0

JS) nhưng nếu tôi thêm một cột mới, tôi cần phải thay đổi chiều rộng một lần nữa mà không phải là giải pháp tốt nhất. –

+0

@KonstantinSolomatov, hãy xem phản hồi mới của tôi. –

+0

Đó là giải pháp mà tôi sử dụng ngay bây giờ (tôi sử dụng GWT thay vì Jquery) nhưng không phải là IMO rất tốt. BTW giải pháp của bạn có một sai lầm: nó không có một biên giới vào tài khoản –

2

Viết này table-layout:fixed;

+5

Nó không hoạt động. Ít nhất là trong Chrome. –

-1

chèn hình ảnh vào từng cột để buộc các kích thước tế bào;

<img src="blank.gif" width="300" height="1" border="0" alt="">