2009-06-03 22 views
5

Tôi không thể làm việc với colspan khi sử dụng chiều rộng cố định (IE 7)? Tại sao?!Colspan không hoạt động với độ rộng <td> được đặt? (IE7)

Mã mẫu:

<html> 
    <head> 
    <style> 
    .inputGroup td 
    { width:250px; }  
    </style> 
    </head> 
<body> 
<table class="inputGroup"> 
    <tr> 
    <td>cell1</td> 
    <td>cell2</td> 
    </tr> 
    <tr> 
    <td colspan="2">This should span two columns but it doesnt</td> 
    </tr> 
    <tr> 
    <td>cell1</td> 
    <td>cell2</td> 
    </tr> 
</table> 
</body> 
</html> 

Trợ giúp ai? :(

Trả lời

7

nó, nhưng bạn đã giới hạn chiều rộng. Nếu bạn muốn, hãy thử tạo một lớp được gọi là '.doubleSpanInputGroup' hoặc một cái gì đó với chiều rộng 500 và thiết lập lớp đó vào cột kéo dài.

ví dụ.

<html> 
    <head> 
    <style> 
    .inputGroup td 
    { width:250px; } 
    .inputGroup td.doubleInputGroup 
    { width:500px; } 
    </style> 
    </head> 
<body> 
<table class="inputGroup"> 
    <tr> 
    <td>cell1</td> 
    <td>cell2</td> 
    </tr> 
    <tr> 
    <td colspan="2" class="doubleInputGroup">This should span two columns but it doesnt</td> 
    </tr> 
    <tr> 
    <td>cell1</td> 
    <td>cell2</td> 
    </tr> 
</table> 
</body> 
</html> 

EDIT: làm phong cách mới thứ bậc hơn

+0

Oh wow. Cảm ơn, đôi khi bạn chỉ không nhìn thấy những gì ngay trước mặt bạn. – Alex

+0

vâng không có probs, dễ nhầm lẫn. Hãy chắc chắn rằng bạn sử dụng phiên bản sửa đổi của tôi ở trên như vượt qua đầu tiên đã có một vấn đề nhỏ :) woops. –

1

Cố gắng làm cho quy tắc áp dụng cho tr thay vì td và làm cho chiều rộng 500px thay vào đó, như vậy:

.inputGroup tr { width: 500px; } 

Sự cố bạn gặp phải là vì bạn đã đặt giới hạn trên td rộng tối đa 250px, do đó trình duyệt chỉ đơn giản làm theo hướng dẫn của bạn.

0

theo cách chung:

table tr:first-child td:first-child{ width:86px; } 

nếu điều này là chiều rộng chỉ tất cả các cột đầu tiên lấy chiều rộng này và colspan trong IE7 sẽ làm việc

0

Tôi cố gắng để thiết lập chiều rộng của các tế bào colspan để ô tô, dường như hoạt động tốt trong IE7/8/9

.yourColSpanTD { width: auto !important; } 
Các vấn đề liên quan