Html xoay văn bản 90 độ trong bảng

Trong cách tiếp cận này, lớp .rotated-th đóng vai trò vừa tạo cha được định vị vừa sử dụng không gian dọc và ngang cần thiết. Sau đó, lớp .rotated-th__label hoạt động để xoay văn bản tiêu đề bảng bằng cách sử dụng cả định vị tuyệt đối - liên quan đến lớp cha .rotated-th - và biến đổi CSS

.rotated-th {
	/**
	* Since the rotated text is taken out of the DOM flow (position: absolute), we
	* need to artificially consume vertical space so that the rotated headers
	* don't overlap with the content above the table.
	*/
	height: 110px ;
	position: relative ;
}
/**
* When an element is transform rotated, it still takes up the amount of space that
* it would have if not rotated. As such, I'm making the label "position: absolute"
* so that it doesn't take up any space ("absolute" takes it out of the DOM flow).
* Instead, I'm deferring the space allocation to the parent DIV.
*/
.rotated-th__label {
	bottom: 5px ;
	left: 50% ;
	position: absolute ;
	transform: rotate( -45deg ) ;
	transform-origin: center left ;
	white-space: nowrap ;
}

Như bạn có thể thấy, chúng tôi đang đặt trình bao bọc văn bản tiêu đề có chiều cao là

.rotated-th {
	/**
	* Since the rotated text is taken out of the DOM flow (position: absolute), we
	* need to artificially consume vertical space so that the rotated headers
	* don't overlap with the content above the table.
	*/
	height: 110px ;
	position: relative ;
}
/**
* When an element is transform rotated, it still takes up the amount of space that
* it would have if not rotated. As such, I'm making the label "position: absolute"
* so that it doesn't take up any space ("absolute" takes it out of the DOM flow).
* Instead, I'm deferring the space allocation to the parent DIV.
*/
.rotated-th__label {
	bottom: 5px ;
	left: 50% ;
	position: absolute ;
	transform: rotate( -45deg ) ;
	transform-origin: center left ;
	white-space: nowrap ;
}
1. Điều này là để văn bản được xoay không trùng lặp với nội dung phía trước lưới dữ liệu. Đối với không gian theo chiều ngang, chúng tôi không cần xác định rõ ràng bất cứ điều gì, chúng tôi chỉ định vị văn bản được bao bọc tại
.rotated-th {
	/**
	* Since the rotated text is taken out of the DOM flow (position: absolute), we
	* need to artificially consume vertical space so that the rotated headers
	* don't overlap with the content above the table.
	*/
	height: 110px ;
	position: relative ;
}
/**
* When an element is transform rotated, it still takes up the amount of space that
* it would have if not rotated. As such, I'm making the label "position: absolute"
* so that it doesn't take up any space ("absolute" takes it out of the DOM flow).
* Instead, I'm deferring the space allocation to the parent DIV.
*/
.rotated-th__label {
	bottom: 5px ;
	left: 50% ;
	position: absolute ;
	transform: rotate( -45deg ) ;
	transform-origin: center left ;
	white-space: nowrap ;
}
2 của vùng chứa của nó. Do đó, khi chiều rộng của cột tăng hoặc giảm, văn bản tiêu đề sẽ điều chỉnh tương ứng. Điều này cũng có nghĩa là các cột phải có kích thước bằng nhau

Tất cả cùng nhau, đây là mã demo




	
	
	
		Rotating Table Headers With CSS Transform
	
	



	

Rotating Table Headers With CSS Transform

Tại nơi làm việc, tôi có một lưới tính năng (tức là bảng dữ liệu), sắp hết chỗ nằm ngang. Trong khi các biểu tượng biểu thị các tính năng hẹp, tiêu đề cột mô tả các tính năng đó tương đối rộng. Vì vậy, tôi muốn bắt đầu chơi xung quanh với các tiêu đề bảng xoay bằng cách sử dụng CSS transform làm phương tiện để giảm yêu cầu không gian ngang của mỗi cột

Chạy bản trình diễn này trong dự án Trình diễn JavaScript của tôi trên GitHub

Xem mã này trong dự án Trình diễn JavaScript của tôi trên GitHub

Kỹ thuật này không mới - Chris Coyier đã viết về nó cách đây một thập kỷ;

Khái niệm ở đây tương đối đơn giản. lấy văn bản của ô

, bọc nó trong một phần tử khác, sau đó sử dụng CSS để rotate() phần tử trung gian đó. Điều đó nói rằng, có một số phức tạp với các phần tử DOM (Mô hình đối tượng tài liệu) xoay

  • Theo mặc định, DOM giữ lại luồng của vị trí ban đầu của phần tử được chuyển đổi. Có nghĩa là, ngay cả khi chúng ta xoay một phần tử để làm cho phần tử đó hẹp hơn về mặt hình ảnh, không gian mà phần tử đó chiếm giữ vẫn tiếp tục khớp với trạng thái không chuyển đổi

  • Nếu chúng ta lấy phần tử đã chuyển đổi ra khỏi luồng DOM (chẳng hạn như bằng cách định vị phần tử đó), thì chúng ta cần chiếm không gian theo cả chiều ngang và chiều dọc một cách giả tạo

Điều này có nghĩa là thật khó để đưa ra giải pháp chung cho vấn đề xoay tiêu đề bảng. Thay vào đó, mỗi cách tiếp cận sẽ phải được làm thủ công để phù hợp với lượng nội dung tiêu đề, mức độ xoay nội dung và các yếu tố khác xung quanh bảng

Trong bản trình diễn sau đây, mỗi ô

chứa hai phần tử lồng nhau hoạt động đồng bộ để xoay văn bản

Feature One
Feature One
Feature Two
Feature Three
Feature Four
Feature Five
Feature Six
Feature Seven
Free Plan
Starter Plan
Professional Plan
Comprehensive Plan
Ultra Comprehensive Plan

Và khi chúng tôi chạy cái này trong các trình duyệt hiện đại (Chrome, Firefox, Safari, iOS), chúng tôi nhận được kết quả sau

Html xoay văn bản 90 độ trong bảng

Như bạn có thể thấy, phần bên ngoài

.rotated-th {
	/**
	* Since the rotated text is taken out of the DOM flow (position: absolute), we
	* need to artificially consume vertical space so that the rotated headers
	* don't overlap with the content above the table.
	*/
	height: 110px ;
	position: relative ;
}
/**
* When an element is transform rotated, it still takes up the amount of space that
* it would have if not rotated. As such, I'm making the label "position: absolute"
* so that it doesn't take up any space ("absolute" takes it out of the DOM flow).
* Instead, I'm deferring the space allocation to the parent DIV.
*/
.rotated-th__label {
	bottom: 5px ;
	left: 50% ;
	position: absolute ;
	transform: rotate( -45deg ) ;
	transform-origin: center left ;
	white-space: nowrap ;
}
3 phân bổ không gian cho văn bản tiêu đề;

Trong bản demo của tôi, các tiêu đề chỉ "nổi", bị ngắt kết nối khỏi cấu trúc đường viền của lưới dữ liệu tổng thể. Tuy nhiên, nếu bạn tìm kiếm phương pháp này trên Google, bạn sẽ tìm thấy các bản trình diễn khác sử dụng

.rotated-th {
	/**
	* Since the rotated text is taken out of the DOM flow (position: absolute), we
	* need to artificially consume vertical space so that the rotated headers
	* don't overlap with the content above the table.
	*/
	height: 110px ;
	position: relative ;
}
/**
* When an element is transform rotated, it still takes up the amount of space that
* it would have if not rotated. As such, I'm making the label "position: absolute"
* so that it doesn't take up any space ("absolute" takes it out of the DOM flow).
* Instead, I'm deferring the space allocation to the parent DIV.
*/
.rotated-th__label {
	bottom: 5px ;
	left: 50% ;
	position: absolute ;
	transform: rotate( -45deg ) ;
	transform-origin: center left ;
	white-space: nowrap ;
}
5 và các biến đổi bổ sung để thêm các đường viền thích hợp vào các tiêu đề được xoay. Tuy nhiên, hiện tại, điều đó vượt quá yêu cầu xoay tiêu đề bảng của tôi

Tấn công trực tiếp lưới dữ liệu InVision

Một trong những điều tuyệt vời khi có Công cụ dành cho nhà phát triển trong trình duyệt là bạn có thể chỉnh sửa trực tiếp bất kỳ trang web nào. Vì vậy, như một phụ lục cho bài đăng này, tôi nghĩ sẽ rất thú vị khi thử và áp dụng kỹ thuật xoay vòng văn bản tiêu đề đã nói ở trên ngay cho bảng sản xuất mà không phải triển khai bất kỳ mã nào. Sau đây là mẫu lưới dữ liệu "Chia sẻ liên kết" trong một dự án demo mà không có bất kỳ xử lý đặc biệt nào

Html xoay văn bản 90 độ trong bảng

Như bạn có thể thấy, lưới tính năng này về cơ bản được tối đa hóa về mặt sử dụng không gian. Tuy nhiên, có rất nhiều khoảng trắng xung quanh các biểu tượng tính năng. Vì vậy, tôi muốn thử và xoay các tiêu đề cột biểu tượng để giảm mức sử dụng không gian theo chiều ngang

Html xoay văn bản 90 độ trong bảng

Như bạn có thể thấy, bằng cách xoay văn bản tiêu đề phía trên các biểu tượng, chúng tôi đã thu hẹp không gian, thu lại chiều rộng khoảng 150px. Điều này có nghĩa là, tôi có thể thêm một cột bổ sung nếu một tính năng mới được thêm vào. Cần phải thực hiện nhiều chỉnh sửa trực quan hơn;

Bạn muốn sử dụng mã từ bài đăng này?

Thích bài đăng này? . ❤️ Share the Love With Your Friends! ❤️

Tweet cái này Bài đăng Groovy của @BenNadel - Xoay tiêu đề bảng với chuyển đổi CSS https. //www. đồng xu. com/go/4338


Ý kiến ​​độc giả

Đăng nhận xét — ❤️ Tôi rất muốn nhận được phản hồi từ bạn. ❤️

Ối

Tên

E-mail

Trang mạng

Bình luận

MỚI. Một số định dạng đánh dấu cơ bản hiện được hỗ trợ. đậm, nghiêng, trích dẫn khối, danh sách, khối mã có hàng rào. Đọc thêm về cú pháp đánh dấu »

😀 😀 😀 🤪 😜 😛 😛 😜 😳 😳 ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤

Xem trước Comment Markdown

Nghi thức nhận xét. Vui lòng không gửi thư rác. Hãy giữ các ý kiến ​​​​về chủ đề. Vui lòng không đăng các câu hỏi không liên quan hoặc các đoạn mã lớn. Và trên hết, hãy đối xử tốt với nhau - chúng ta đang cố gắng có một cuộc trò chuyện vui vẻ ở đây

Gửi bình luận

Đăng ký bình luận

❤️ ❤️ Cảm ơn vì nhận xét của bạn ❤️ ❤️

Để giữ cho trang web này vui vẻ, an toàn và tràn đầy những cảm xúc ngọt ngào, ngọt ngào, nhận xét của bạn đã được gửi để phê duyệt