Thay đổi chiều rộng cột HTML khi hàng trong bảng bị ẩn

Question

Tôi là người mới tham gia lập trình web, vì vậy có lẽ tôi đang mắc lỗi rõ ràng ở đây.

Khi tôi cố gắng ẩn một hàng trong một bảng từ javascript như hàng [i] .style.display = 'none', bố cục bảng sẽ bị hỏng hoàn toàn. Ban đầu, nội dung của ô đã được gói lại và chiều rộng của bảng đã bị thu hẹp lại. Sau đó tôi đã thêm style = "table-layout: fixed" vào thẻ table và style = "white-space: nowrap" trong mỗi td. Điều này đã dừng việc gói dòng, nhưng vẫn nội dung không được căn chỉnh trên một dòng. Các ô bắt đầu di chuyển sang trái nếu có không gian và chiều rộng cột thay đổi từ hàng này sang hàng khác. Sau đó tôi thêm một chiều rộng cố định cho mỗi phần tử thứ và td và cũng cho div chứa bảng. Vẫn còn vấn đề vẫn còn.

HTML hiện tại của tôi giống như sau.

---

<div style="width: 300px"> 
    <table id="errorTable" width="100%" cellpadding="5" cellspacing="2" style="table-layout: fixed"> 
    <tr id="HeaderRow"> 
     <th style="width: 100px;">Header 1</th> 
     <th style="width: 50px;">Header 2</th> 
     <th style="width: 150px;">Header 3</th> 
    </tr> 
    <tr id="DetailRow1">           
     <td style="white-space:nowrap; width: 100px;">Data 1_1 in Row 1</td> 
     <td style="white-space:nowrap; width: 50px;">Data 1_2 in Row 1</td> 
     <td style="white-space:nowrap; width: 150px;">Data 1_3 in Row 1</td> 
    </tr> 
    <tr id="DetailRow2">           
     <td style="white-space:nowrap; width: 100px;">Data 2</td> 
     <td style="white-space:nowrap; width: 50px;">Data 2</td> 
     <td style="white-space:nowrap; width: 150px;">Data 2</td> 
    </tr> 
    <tr id="DetailRow3">           
     <td style="white-space:nowrap; width: 100px;">Data 3_1</td> 
     <td style="white-space:nowrap; width: 50px;">Data 3_2</td> 
     <td style="white-space:nowrap; width: 150px;">Data 3_3</td> 
    </tr> 
    </table> 
</div> 

---

Khi bảng được hiển thị lần đầu tiên, các cột được sắp xếp đúng, với chiều rộng 100, 50 và 150 px tương ứng. Nhưng nếu một hàng, giả sử hàng thứ hai bị ẩn, chiều rộng ô của hai hàng được hiển thị còn lại không còn cố định ở 100, 50 và 150 và dữ liệu không còn được căn chỉnh theo chiều dọc nữa. Xin lưu ý rằng chiều rộng bảng tổng thể vẫn là 300 px. Dữ liệu trong mỗi ô sẽ di chuyển sang trái nếu có dung lượng trống và khoảng trống bổ sung được sử dụng bởi lần cuối cùng, trong trường hợp này là cột thứ ba.

Bài đăng sau hữu ích nhưng không giải quyết được vấn đề của tôi đầy đủ, như bạn có thể thấy. Hiding table rows without resizing overall width

Mọi trợ giúp sẽ được chào đón nhiều nhất.

Answer 1

Luôn sửa chiều rộng của các cột. Liệu đó có phải là vấn đề duy nhất của bạn?

.myTable td{ width:33% !important; } 

Lý tưởng nhất, bạn cũng nên kèm theo tiêu đề và thân phận sử dụng thead và tbody

<table> 
    <thead> 
    <tr> ... </tr> 
    </thead> 

    <tbody> 
    . 
    .  
    . 
    </tbody> 
</table> 

Answer 2

Tôi đang gặp vấn đề tương tự. Tôi đã ném một khoảng trống bên trong mỗi bàn để xem liệu tôi có thể ép chiều rộng và nó có vẻ hoạt động không. Đó là xấu xí mặc dù.

Answer 3

Tôi gặp vấn đề tương tự: Tôi đã cố ẩn một cột bằng elem.style.display="none" nhưng khi hiển thị lại bố cục đã bị hỏng. Kiểu hiển thị này hoạt động cho tôi:

columns.item(i).style.display = "table-cell";