Chiều rộng cột tùy chỉnh WordPress

Điều này có thể được thực hiện với một số mã CSS chỉ cần được thêm vào vùng văn bản “CSS tùy chỉnh” trên màn hình “Tùy chọn plugin” của TablePress

.tablepress-id-N .column-2 {
	width: 100px;
}
Code language: CSS (css)

N cần được thay đổi thành ID của bảng được đề cập (hoặc sử dụng .tablepress làm phần đầu tiên của bộ chọn, nếu bạn muốn điều này áp dụng cho tất cả các bảng TablePress trên trang web của mình—điều này thường không được khuyến khích, để không làm mất tính linh hoạt)

Đây là mô hình chung mà tôi khuyên dùng. Bạn có thể sử dụng tùy chọn này thường xuyên nếu cần, thay đổi cột được đề cập thành số chính xác mỗi lần. Nếu bạn muốn đặt nhiều cột có cùng chiều rộng, hãy làm theo mẫu

.tablepress-id-N .column-2,
.tablepress-id-N .column-4,
.tablepress-id-N .column-7 {
	width: 150px;
}
Code language: CSS (css)

Ghi chú. Trong hầu hết các trường hợp, không cần thiết phải đặt trực tiếp độ rộng của cột. Thay vào đó, bạn có thể muốn giảm phần đệm (khoảng trắng giữa văn bản trong một ô và các cạnh của ô), bằng mã CSS

.tablepress-id-N .column-2 {
	padding: 4px;
}
Code language: CSS (css)

mà một lần nữa cần phải được điều chỉnh như trên

Xin lưu ý rằng không phải lúc nào cũng có thể giảm chiều rộng của cột trong bảng vì theo mặc định, từ đơn dài nhất hoặc nội dung khác trong cột xác định chiều rộng tối thiểu của cột đó

Do đó, bạn có thể phải sử dụng một giải pháp để làm cho bảng của mình “đáp ứng”, e. g. bằng cách sử dụng mô-đun tính năng Responsive Tables có sẵn trong các gói TablePress Premium, đặc biệt là trên các màn hình nhỏ hơn, như điện thoại và bảng

Khối bảng WordPress cung cấp hai tùy chọn kiểu bảng – Mặc định (kích thước tự động) và Ô bảng có chiều rộng cố định

Trong Kiểu bảng mặc định, kích thước cột trong bảng của bạn được đặt tự động dựa trên nội dung ô. Và, ở kiểu Chiều rộng cố định, tất cả các ô đều có cùng kích thước trong bảng

Tại sao cần phải thay đổi chiều rộng cột khối bảng WordPress?

Trong hầu hết các trường hợp, người dùng WordPress sử dụng kiểu bảng mặc định với Table Block. Tuy nhiên, trong một số trường hợp, dựa trên nội dung của bảng, người dùng cần thay đổi kích thước cột của bảng dựa trên nội dung của nó

Ví dụ: Khối bảng có ba cột - Chỉ mục, Tiêu đề và Mô tả. Ở đây, người dùng muốn làm cho cột “Chỉ mục” và “Tiêu đề” nhỏ hơn so với cột “Mô tả”

Tuy nhiên, loại cài đặt tùy chỉnh kích thước cột này không khả dụng trong WordPress Table Block

Bây giờ, để giải quyết vấn đề này, bạn sẽ nhận được hai giải pháp trong bài đăng này. Bằng cách sử dụng các giải pháp này, bạn có thể thay đổi độ rộng cột của Khối bảng mà không cần sử dụng bất kỳ plugin nào

Thay đổi chiều rộng cột khối bảng WordPress bằng cách sử dụng CSS bổ sung

Trong giải pháp CSS bổ sung, bạn cần đặt “(Các) lớp CSS bổ sung” trong cài đặt “Nâng cao” của Khối bảng

Sau đây là các bước để thêm CSS bổ sung để thay đổi độ rộng cột của Khối bảng

1. Tạo và hoàn thành bảng của bạn bằng Table Block
2. Bây giờ, hãy chuyển đến cài đặt “Nâng cao > Lớp CSS bổ sung” và thêm tên lớp “bảng-cột tùy chỉnh”
3. Mở cài đặt “Giao diện > Tùy chỉnh > CSS bổ sung” trong tab mới
4. Thêm mã sau vào “CSS bổ sung” và nhấp vào nút xuất bản

.custom-column-table tr>th:nth-child(1) { width: 10%; }

Đặt lớp CSS thành Khối bảng

Kiểu CSS để thay đổi chiều rộng Khối bảng

Hiểu mã CSS cột Bảng khối

Mã trên đặt kiểu cho cột đầu tiên của tiêu đề bảng của bạn. Ở đây, “con thứ n(1)” có nghĩa là bàn đầu tiên liên tiếp

Nếu bạn đặt “con thứ n(2)”, thì kiểu dáng sẽ áp dụng cho đầu bảng thứ hai trong hàng

Và, “chiều rộng. 10%;” . Bạn có thể thay đổi giá trị này từ 10% đến 15% trở lên, theo kích thước nội dung của bạn

Dựa trên thông tin mã CSS ở trên, bạn có thể quản lý bất kỳ chiều rộng cột nào trong Block Table

Tôi có thể sử dụng lớp CSS này trong tất cả các bảng Khối của bài đăng không?

Có, bằng cách thêm tên lớp trong cài đặt “(Các) lớp CSS bổ sung” của Block, bạn có thể sử dụng lớp này cho nhiều Bảng khối

Tuy nhiên, nếu bạn muốn áp dụng một kiểu khác cho một bảng mới, thì hãy tạo một lớp mới trong “Giao diện > Tùy chỉnh > CSS bổ sung” với một tên khác và sử dụng lớp đó cho bảng mới

Ví dụ,

.custom-column-table-price tr>th:nth-child(3) { width: 40%; }

Thay đổi chiều rộng cột khối bảng WordPress bằng tùy chọn Chuyển đổi sang HTML

Trong phương pháp này, bạn cần thêm chiều rộng ô của bảng nội tuyến và chuyển đổi khối thành khối HTML tùy chỉnh

Sau đây là các bước để tạo Khối bảng thành khối HTML tùy chỉnh

1. Tạo và hoàn thành bảng của bạn bằng Table Block

2. Nhấn vào biểu tượng ba chấm để mở Block “Options”

3. Từ danh sách tùy chọn, chọn tùy chọn “Chỉnh sửa dưới dạng HTML”

4. Bây giờ, hãy đặt inline [width=”10%” ] cho ô của bạn ở hàng đầu tiên (Ví dụ được đưa ra trong hình ảnh bên dưới)

Bảng khối – Đặt chiều rộng nội tuyến cho ô đầu tiên của cột

5. Tiếp theo, nhấp vào bên ngoài Table Block để mở quy trình “Attempt Block Recovery”

Chuyển đổi khối bảng sang HTML

6. Tại đây, nhấp vào tùy chọn biểu tượng ba chấm và chọn “Chuyển đổi sang HTML”

7. Kiểm tra xem trước bài đăng và xuất bản thay đổi

Giải pháp này yêu cầu ít kiến ​​thức về cú pháp bảng HTML. Nhưng, bằng cách làm theo các bước trên, bạn có thể dễ dàng thực hiện trong blog của mình

Trong các bước trên, ví dụ được đưa ra để thay đổi chiều rộng cột thứ hai

Tuy nhiên, nếu bạn muốn thay đổi độ rộng cột khác, thì bạn cần thêm mã [width=”10%” ] vào số ô đó trong hàng của bảng đầu tiên