Chiều rộng cột cố định trong bảng HTML

Question

Tôi có một bảng HTML có các hàng được thêm vào trong vòng lặp PHP. Đây là những gì cơ thể lặp trông giống như

<tr> 
    <td style="width:220px"><?php echo $a; ?></td> 
    <td style="width:150px"><?php echo $b; ?></td> 
    <td style="width:70px"><?php echo $c; ?></td> 
    <td style="width:70px"><?php echo $d; ?></td> 
</tr> 

Vấn đề là, khi các nội dung trong cột thứ hai của bất kỳ hàng hơi lớn, độ rộng của cột thứ hai vượt quá 150px, và để bù lại độ rộng của đầu tiên cột giảm. Làm thế nào tôi có thể ngăn chặn điều đó xảy ra. Tôi muốn chiều rộng không thay đổi và nếu nội dung trong bất kỳ ô cụ thể nào quá lớn để vừa, chiều cao sẽ tăng lên để phù hợp.

Answer 1

bạn nên cố gắng hướng dẫn CSS này:

td { word-wrap: break-word; } 

mà làm việc trong nhiều trình duyệt (có, bao gồm cả IE 6, thậm chí IE 5,5 nhưng không phải FX 3.0 Nó chỉ được công nhận bởi Fx3.5 + Cũng tốt cho.. Saf, Chr và Op nhưng tôi không biết phiên bản chính xác của những cái này) và không gây hại gì cho những cái khác.

Nếu chiều rộng của bảng vẫn còn sai lầm, đó cũng là:

table { table-layout: fixed; } 
th, td { width: some_value; } 

mà sẽ buộc các trình duyệt để sử dụng các thuật toán bảng khác, là nơi mà nó không cố gắng để thích nghi với nhiều tình huống bao gồm cả những vụng về nhưng dính vào những gì bảng định kiểu nói.

Answer 2

thử cách này

<tr> 
    <td style="overflow:hidden;width:200px;"><?php echo $a; ?></td> 
    <td style="overflow:hidden;width:150px;"><?php echo $b; ?></td> 
    <td style="overflow:hidden;width:70px;" ><?php echo $c; ?></td> 
    <td style="overflow:hidden;width:70px;" ><?php echo $d; ?></td> 
</tr> 

hoặc bạn có thể sử dụng style="WORD-BREAK:BREAK-ALL; trong phong cách

Answer 3

<tr> 
    <td style="word-wrap:break-word;width:200px;"><?php echo $a; ?></td> 
    <td style="word-wrap:break-word;width:150px"><?php echo $b; ?></td> 
    <td style="word-wrap:break-word;width:70px"><?php echo $c; ?></td> 
    <td style="word-wrap:break-word;width:70px"><?php echo $d; ?></td> 
</tr> 

Bạn có thể thử word-wrap:break-word;

Giới thiệu về tài sản

Thuộc tính này quy định cụ thể wh ête dòng kết xuất hiện tại sẽ phá vỡ nếu nội dung vượt quá ranh giới của hộp hiển thị được chỉ định cho một phần tử (điều này tương tự theo một số cách cho thuộc tính 'clip' và 'overflow' trong ý định.) Thuộc tính này chỉ nên áp dụng nếu phần tử có hiển thị trực quan, là một phần tử nội tuyến có chiều cao/chiều rộng rõ ràng, được định vị hoàn toàn và/hoặc là phần tử khối.

Answer 4

Bạn chỉ cần thêm từ bọc: ngắt từ thuộc tính CSS.

mã của bạn sẽ trông như thế này

<td style="width:150px; word-wrap: break-word"><?php echo $b; ?></td> 

Answer 5

Bạn có thể bọc nó mỗi nội dung tds với một div và áp dụng phong cách css tràn trên mỗi div:

Hãy thử mẫu này, bạn có thể thay đổi hoặc bổ sung thêm kiểu hoặc thay đổi tràn:

<style> 
    div.c220{ width:220px; overflow:hidden; } 
    div.c150{ width:150px; overflow:hidden; } 
    div.c70{ width:170px; overflow:hidden; } 
</style> 
<tr> 
    <td><div class="c220"><?php echo $a; ?></div></td> 
    <td><div class="c150"><?php echo $b; ?></div></td> 
    <td><div class="c70"><?php echo $c; ?></div></td> 
    <td><div class="c70"><?php echo $d; ?></div></td> 
</tr>