Trick này hiển thị tốt trên IE 8 nè

Dùng thẻ DIV hiển thị như table bằng CSS

Công nghệ hiển thị CSS dành cho web cải tiến liên tục kéo theo hàng loạt các cải tiến khác liên quan tới HTML và trình duyệt, và giờ đây chúng ta không cần tới thẻ table nữa mà vẫn có thể hiển thị khung sườn được như thẻ table trong html, hơn nữa việc này giúp cho website của bạn có thể dễ dàng được Google index và hoàn toàn có lợi cho SEO, thế nên chúng ta cùng thử làm cách sau để thiết kế một website TABLE-Free nhé !

Trick này hiển thị tốt trên IE 8 nè
Trick này hiển thị tốt trên IE 8 nè

Bằng một cách đơn giản và dễ dàng hiểu được nhất, sau đây mình cùng các bạn sẽ thiết kế một đoạn HTML kèm theo CSS sử dụng property “display: table-cell” để hiển thị khung sườn giống như table, nhưng cảnh báo trước là không thể giống y nguyên được nhé, ngoài ra cũng không phải hiển thị đúng trên toàn bộ các trình duyệt, có những trình duyệt lạc hậu như IE 6, 7 và các version Opera cũ không thể hiển thị đúng được, lúc đó bạn cần phải thêm vài thuộc tính vào mới được.

HTML:

<div class="container">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>

Còn CSS:

.container {
display: table;
}
.column {
display: table-cell;
}

Trong trường hợp bạn muốn hiển thị nhiều hàng và nhiều cột khác nhau thì ta cần phải dùng thuộc tính display:table-row nhé:

<div class="container">
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
<div class="row">
<div class="column">Column 1</div>
<div class="column">Column 2</div>
<div class="column">Column 3</div>
</div>
</div>

Lúc này CSS sẽ là:

.container {
display: table;
}
.row {
display: table-row;
}
.column {
display: table-cell;
}

 

Trong khi nếu bạn dùng thẻ table trong html nó sẽ như thế này:

<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>

Trong trường hợp bạn muốn cột ngắn nhất cao tự động theo cột dài nhất để nhất quán hiển thị, các bạn có thể cần thêm một chút css như sau:

<div class="container">
<div class="column">Column 1.</div>
<div class="column">Column 2 is a bit longer.</div>
<div class="column">Column 3 is longer with lots of text in it.</div>
</div>

.container {
display: table;
}
.column {
display: table-cell;
width: 100px;
}

Chúc các bạn thành công nha !

 

TÁC GIẢ:

Tôi là Jam, thâm niên 7 năm thiết kế website và làm SEO. Hãy theo dõi blog của tôi để nhận được nhiều chia sẻ thú vị xung quanh chủ đề công nghệ.

Có 18 bình luận !

      1. Tức là mình muốn làm header có 1 cái bảng bao hàm hình ảnh bên trái, ở giữa là text, và ở bên phải là widget tìm kiếm, nhưng mình ko làm đc. Mình làm wordpress cài theme free nên nhiều hạn chế. Mong bạn giúp. Híc.Thanks!

    1. bạn phải cho thẻ div đó hiển thị theo dạng Inline-block, sau đó float = left thì nó sẽ xếp theo hàng ngang, hoặc cách khác là cho thẻ div hiển thị dạng table !
      Cái này bạn cần phải biết CSS, nếu không sẽ khó đó, bạn cho mình cái đường link mình hỗ trợ cho !

  1. Em chào anh! Anh cho em hỏi sao em làm như vậy nhưng khi hiển thị ra nó không hiển thị được border cho từng hàng ạ! Làm thế nào để nó hiển thị border ra thành hàng

      1. Không được anh ạ! nó không hiển thị được.Đây là code của em anh xem qua giúp em. Em cảm ơn a.
        File html
        Phiếu đánh giá

        Tên người lấy ý kiến:

        Tên người lấy ý kiến:

        File CSS
        form
        {
        border:2px solid green;
        width:550px;
        text-align:center;
        }
        .bangf
        {
        display:table;
        width:500px;
        margin:10px 20px 10px 20px;

        }
        .hangf
        {
        display:table-row;
        border:2px solid green;
        }
        label
        {
        display:table-cell;
        margin-top:10px;
        }
        input
        {
        display:table-cell;
        margin-top:10px;
        }

  2. Mình định add nút chia sẻ mạng xã hội vào Website. Trước m để các thẻ div tự do nó xếp theo hành dọc, giờ cho vào tab nhưng khoảng cách nó xa quá. B thử xem hộ m xem cách khắc phục với. Link đây ạ:kidandmomshop.com/vi-ta-min-D-flour-bo-sung-vitamin-d-giup-rang-chac-khoe.
    Thanks b.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *