Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
Trong bài thực hành này, chúng ta sẽ tìm hiểu cách tạo các bảng nằm cạnh nhau bằng HTML và CSS.
Name | Country | Gender |
---|---|---|
Glfreds Futterkiste | Germany | Female |
Aerglunds snabbkop | Sweden | Male |
Island Trading | UK | Male |
Name | Country | Gender |
---|---|---|
Glfreds Futterkiste | Germany | Female |
Aerglunds snabbkop | Sweden | Male |
Island Trading | UK | Male |
Bước 1) Thêm HTML:
Ví dụ
<div class="myContainer"> <div class="myColumn"> <table> <tr> <th>Name</th> <th>Country</th> <th>Gender</th> </tr> <tr> <td>Glfreds Futterkiste</td> <td>Germany</td> <td>Female</td> </tr> <tr> <td>Aerglunds snabbkop</td> <td>Sweden</td> <td>Male</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> <td>Male</td> </tr> </table> </div> <div class="myColumn"> <table> <tr> <th>Name</th> <th>Country</th> <th>Gender</th> </tr> <tr> <td>Glfreds Futterkiste</td> <td>Germany</td> <td>Female</td> </tr> <tr> <td>Aerglunds snabbkop</td> <td>Sweden</td> <td>Male</td> </tr> <tr> <td>Island Trading</td> <td>UK</td> <td>Male</td> </tr> </table> </div> </div>
Bước 2) Thêm CSS:
Ví dụ
/* 2 cột có chiều rộng bằng nhau và float sang trái */ .myContainer > .myColumn { width:50%; padding:15px; float:left; } /* Clear fixed */ .myContainer::affter { content:""; display:table; clear:both; }
Chúng ta cũng có thể sử dụng bố cục hộp linh hoạt flex
để đặt các bảng nằm cạnh nhau.
Ví dụ
/* Sử dụng hộp linh hoạt flex */ .myContainer { display:flex; } /* 2 cột flex bằng nhau */ .myContainer > .myColumn { flex:50%; padding:15px; }