Tạo table bằng div - định dạng giống table bootstrap

Chủ nhật - 01/03/2020 21:41

Tạo table bằng div - định dạng giống table bootstrap

Mã HTML
<div class="divTable">
	<div class="divHeading">
		<div class="Cell">
			Heading 1
		</div>
		<div class="Cell">
			Heading 2
		</div>
		<div class="Cell">
			Heading 3
		</div>
	</div>
	<div class="Row">
		<div class="Cell">
			Row 1 Column 1
		</div>
		<div class="Cell">
			Row 1 Column 2
		</div>
		<div class="Cell">
			Row 1 Column 3
		</div>
	</div>
	<div class="Row">
		<div class="Cell">
			Row 2 Column 1
		</div>
		<div class="Cell">
			Row 2 Column 2
		</div>
		<div class="Cell">
			Row 2 Column 3
		</div>
	</div>
</div>
Mã CSS: 
.divTable {
	display: table;
	border-collapse: collapse;
	border-spacing: 0;
}
.divTable .divTitle {
	display: table-caption;
	text-align: center;
	font-weight: bold;
	font-size: larger;
}
.divTable .divHeading {
	display: table-row;
	font-weight: bold;
	border-bottom-width: 2px;
}
.divTable .divHeading .Cell {
	border-bottom-width: 2px;
}
.divTable .Row {
	display: table-row;
}
.divTable .Row:nth-of-type(odd) {
    background-color: #f9f9f9;
}
.divTable .Row:hover {
	background-color: #f5f5f5;
	cursor: default
}
.divTable .Cell {
	display: table-cell;
	border: 1px solid #ddd;
	border-width: thin;
	padding: 8px;
}
Kết quả:
 
Heading 1 Heading 2 Heading 3
Row 1 Column 1 Row 1 Column 2 Row 1 Column 3
Row 2 Column 1 Row 2 Column 2 Row 2 Column 3

Tác giả bài viết: Trần Minh Tuấn


Chú ý: Việc đăng lại bài viết trên ở website hoặc các phương tiện truyền thông khác mà không ghi rõ nguồn https://web360do.com là vi phạm bản quyền

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Xếp hạng: 0 - 0 phiếu bầu
Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây