Làm thế nào để ngăn chặn một bảng từ co lại thành một khung nhìn

Question

Tôi có đoạn mã sau:

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?

Answer 1

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; 
} 

Answer 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); 
})(); 
​ 

Answer 3

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

Answer 4

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="">