thực hành - bảng nằm cạnh nhau

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.

Bảng nằm cạnh nhau


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

 

Xem kết quả

Cách tạo các bảng nằm cạnh nhau


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;    
}

Xem kết quả

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;
}

Xem kết quả

Flexbox không được hỗ trợ trong Internet Explorer 10 và các phiên bản cũ hơn. Tùy bạn muốn sử dụng float hoặc flex. Tuy nhiên, nếu cần hỗ trợ cho IE10 trở xuống, bạn nên sử dụng float.