Chiều rộng cột với Tablesorter + filter

Question

Trong khi sử dụng chủ đề mặc định css tablesorter, nếu tôi tránh đặt chiều rộng bảng, tôi sẽ có được một bảng đẹp với tất cả các cột được điều chỉnh hoàn hảo thành trường dài nhất. NHƯNG, Nếu tôi thêm tiện ích lọc, tất cả các cột sẽ xuất hiện rộng hơn nhiều so với trước đây, với nhiều không gian trống. Đôi khi các cột văn bản được bao bọc, trong khi những cột khác trông gần như trống.

Hành vi này có thể tránh được không? Cảm ơn!

Answer 1

Bộ lọc đầu vào kích thước cố hữu phụ thuộc vào trình duyệt, phiên bản và hệ điều hành của bạn. Vì vậy, chỉ cần thêm một đầu vào vào một ô bảng sẽ kéo dài nó đến kích thước đó. Nhưng bạn có thể đặt max-width hoặc width bằng css.

Tôi đã updated the demo bạn chia sẻ, với css này để hiển thị như thế nào với chủ đề thiết lập phong cách có thể được ghi đè:

.tablesorter, .tablesorter .tablesorter-filter { 
    width: auto; 
} 

Nếu bạn muốn cột hẹp hơn, chỉ cần thiết lập chiều rộng đầu vào như một kích thước pixel (demo):

.tablesorter { 
    width: auto; 
} 
.tablesorter .tablesorter-filter { 
    width: 50px; 
} 

---

cập nhật: nếu bạn cần đầu vào chiều rộng khác nhau, hãy thử css này (demo):

.tablesorter .tablesorter-filter-row td:nth-child(4n+1) .tablesorter-filter { 
    width: 80px; 
} 
.tablesorter .tablesorter-filter-row td:nth-child(4n+2) .tablesorter-filter { 
    width: 40px; 
} 

nơi 4 trong 4n là số cột trong bảng (one-dựa-index)

Answer 2

Một cách khác để thoát khỏi một số khoảng trống được thiết lập chiều rộng đến 100%

.tablesorter .tablesorter-filter { 
    width: 100%; 
} 

Answer 3

Nếu bạn có các chuỗi không gián đoạn trong bảng dữ liệu của bạn, bạn có thể cần phải thử thay đổi:

table.tablesorter tbody td { 
    color: #3D3D3D; 
    padding: 4px; 
    background-color: #FFF; 
    vertical-align: top; 
} 

để:

table.tablesorter tbody td { 
    color: #3D3D3D; 
    padding: 4px; 
    background-color: #FFF; 
    vertical-align: top; 
    max-width:400px; 
    word-wrap:break-word; 
} 

(này làm việc cho tôi trong Chrome và IE11)

Answer 4

Bạn có thể thay đổi kích thước của mỗi boxe văn bản bằng cách sử dụng phong cách sau đây

#sites_list_table .tablesorter-filter-row td>[data-column="1"] { 
    width: 100px; 
} 
#sites_list_table .tablesorter-filter-row td>[data-column="4"] { 
    width: 100px; 
} 
#sites_list_table .tablesorter-filter-row td>[data-column="6"] { 
    width: 100px; 
} 

(#sites_list_table là id của bảng)