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.