Chiều cao hàng của bảng bootstrap nhỏ hơn

Theo mặc định, hầu hết các trình duyệt đều sử dụng thuật toán bố cục bảng tự động. Độ rộng của bảng và các ô của nó được điều chỉnh để phù hợp với nội dung

table-layout = 
auto |
fixed

0

Chiều rộng của bảng và cột được đặt theo chiều rộng của các phần tử

table-layout = 
auto |
fixed

1 và
table-layout = 
auto |
fixed

2 hoặc theo chiều rộng của hàng ô đầu tiên. Các ô ở các hàng tiếp theo không ảnh hưởng đến độ rộng của cột

Theo phương pháp bố cục "cố định", toàn bộ bảng có thể được hiển thị sau khi hàng đầu tiên của bảng được tải xuống và phân tích. Điều này có thể tăng tốc thời gian kết xuất so với phương pháp bố cục "tự động", nhưng nội dung ô tiếp theo có thể không vừa với độ rộng cột được cung cấp. Các ô sử dụng thuộc tính

table-layout = 
auto |
fixed

0 để xác định xem có cắt bất kỳ nội dung tràn nào hay không, nhưng chỉ khi bảng có chiều rộng đã biết;

định nghĩa chính thức

Giá trị ban đầu

table-layout = 
auto |
fixed

3Áp dụng cho các phần tử
table-layout = 
auto |
fixed

1 và
table-layout = 
auto |
fixed

3Kế thừakhông có Giá trị tính toánnhư đã chỉ địnhKiểu hoạt ảnhrời rạc

cú pháp chính thức

table-layout = 
auto |
fixed

ví dụ

Các bảng có chiều rộng cố định với tràn văn bản

Ví dụ này sử dụng bố cục bảng cố định, kết hợp với thuộc tính

table-layout = 
auto |
fixed

4, để hạn chế chiều rộng của bảng. Thuộc tính
table-layout = 
auto |
fixed

5 được sử dụng để áp dụng dấu chấm lửng cho những từ quá dài để phù hợp. Nếu cách bố trí bảng là
table-layout = 
auto |
fixed

3, bảng sẽ phát triển để phù hợp với nội dung của nó, mặc dù đã chỉ định
table-layout = 
auto |
fixed

4

Sử dụng thuộc tính

table-layout = 
auto |
fixed

6 với thuộc tính
table-layout = 
auto |
fixed

7 hoặc
table-layout = 
auto |
fixed

8 để chỉ định kích thước của bảng, hàng hoặc cột


Chiều rộng bảng HTML

Để đặt chiều rộng của bảng, hãy thêm thuộc tính

table-layout = 
auto |
fixed

6 vào
table-layout = 
auto |
fixed

0

table-layout = 
auto |
fixed

1

table-layout = 
auto |
fixed

2, bạn sẽ thấy rằng nó chỉ dưới 120px.
Chiều cao hàng của bảng bootstrap nhỏ hơn

Thay vì nhắm mục tiêu vào

table-layout = 
auto |
fixed

3, hãy chuyển xuống phần tử
table-layout = 
auto |
fixed

4 tiếp theo và nhắm mục tiêu vào lớp
table-layout = 
auto |
fixed

5.

.row {
  height: 120px;
}

img {
  width: 50px;
  height: 50px;
}

Sau đó, hàng sẽ là 120px như bạn mong đợi

Chiều cao hàng của bảng bootstrap nhỏ hơn

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO


Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu