Cách Tạo bảng Responsive table hiển thị tốt trên tất cả thiết bị sử dụng Bootstrap

Viết bởi 

Dùng bootstrap 3 để để tạo ra table thì rất là đơn giản, chỉ cần vài dòng code là các bạn có ngay một table nhìn rất bắt mắt cũng như rất dễ tinh chỉnh so với table html thông thường. Để không làm mất thời gian quý báu của các bạn thì chúng ta sẽ tìm hiểu xem bootstrap 3 hỗ trợ phần stylesheet table ra sao nhé.

1. Tạo table đơn giản với boostrap 3

Để tạo một table đơn giản nhưng đẹp mắt trong bootstrap 3 thì ta chỉ cần tuân theo cấu trúc HTML Table bình thường, đồng thời thêm một class="table" vào. Một lưu ý nữa lớp .table trong bootstrap nó sẽ tự nhận diện hai group thead dùng hiển thị title và tbody dùng hiển thị nội dung nên bạn phải tuân thủ theo cấu trúc này nhé.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Basic</h2>
                <table class="table">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
         
    </div>
</body>
</html>

Giao diện:


Hình ảnh table basic

2. Class table-striped trong bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Striped</h2>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
 
    </div>
</body>
</html>

Giao diện:


Hình ảnh table striped

Để có thể tạo ra table giống trong hình thì ngay phần class table các bạn chỉ cần thêm vào class table-striped thì mọi thứ xem như được giải quyết. Đơn giản quá đúng không nào, và tôi dám cá rằng có bạn đang thốt lên rằng sử dụng bootstrap 3 tạo ra table sao mà đơn giản quá.

3. Class table-bordered trong bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Border</h2>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
 
    </div>
</body>
</html>

Giao diện:


Hình ảnh table bordered

Ở phần này cũng giống như phần striped. Các bạn chỉ viêc thêm vào class table-bordered thì sẽ có được một cái table được bao bọc trong đường viền. Câu hỏi đưa ra ở đây là tôi vừa muốn table có đường viền và các dòng được tô trắng & đen thì làm như thế nào ? Xin thưa rằng các bạn thêm trực tiếp class table-striped vào kế bên thì kêt quả sẽ đúng như sự mong muốn của các bạn.

4. Class table-hover trong bootstrap 3

Ví dụ: (Xem demo)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Hover</h2>
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
 
    </div>
</body>
</html> 

Giao diện:


Hình ảnh table hover

Đây là class dùng để định nghĩa khi các bạn rê chuột vào cột thì sẽ hover lên background ngay dòng đó. Sử dụng bằng cách thêm vào class table-hover.

5. Class table-condensed trong bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Reponsive</h2>
            <div class="table-responsive">   
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="active">
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr class="success">
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr class="danger">
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr class="warning">
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                    </tbody>
                </table>
             </div>  
            </div>
        </div>
 
    </div>
</body>
</html>

Giao diện:


Hình ảnh table condensed

Phần này giúp cho các bạn thu nhỏ table lại nhìn cho nó gọn và bắt mắt hơn.Sử dụng bằng cách thêm vào class table-condensed.

6. Stylesheet & Responsive màu sắc cho table

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 3 Simple Tables</title>
    <style type="text/css">
        .example{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="example">
        <div class="container">
            <div class="row">
                <h2>Table Reponsive</h2>
            <div class="table-responsive">   
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>STT</th>
                            <th>Họ Tên</th>
                            <th>Giới tính</th>
                            <th>Email</th>
                            <th>Địa chỉ</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="active">
                            <td>1</td>
                            <td>Văn Cường</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
                        </tr>
                        <tr class="success">
                            <td>2</td>
                            <td>Hoài Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr class="danger">
                            <td>3</td>
                            <td>Quốc Minh</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                        <tr class="warning">
                            <td>3</td>
                            <td>Huy Phong</td>
                            <td>Nam</td>
                            <td>This email address is being protected from spambots. You need JavaScript enabled to view it.;/td>
                            <td>192 Hầm tử</td>
 
                        </tr>
                    </tbody>
                </table>
             </div>  
            </div>
        </div>
 
    </div>
</body>
</html>

Giao diện:


Hình ảnh stylesheet table

Phần này giúp các bạn dễ dàng tạo ra một table với màu sắc riêng từng dòng và tự động co giãn khi thu nhỏ trình duyêt. Sử dụng bằng cách bọc tất cả thành phần table vào class table-responsive, còn phần màu sắc của các dòng thì ngay chỗ thẻ tr các bạn thêm vào các class như là warning,danger, active..vvv



Sln đc: 1117 lần

Bạn cần tư vấn? Bạn cần báo giá? Bạn có thắc mắc, vui lòng liên hệ mình qua skyper: JoomCom Tel: 0983.3636.85 hoặc để lại phản hồi bên dưới, cảm ơn bạn

HOTLINE phản hồi trực tuyến: Mr. Phú: 0983.3636.85 --/-- Ms.Oanh: 0975.527.593 / 0919 3789 33
Email: DNAmedia.jsc@gmail.com / JoomCom@gmail.com
Skyper: JoomCom
Zalo và Viber:
0983363685

Hỗ trợ trực tuyến

Thiết kế giao diện: 
Mr. H Phú
Ms.Oanh
Thiết kế website:
Mr. Tr.Phú
Ms.Yến
SEO GOOGLE và tối ưu hóa:
Mr.Phú
 ZALOskype-call-us

Facebook lamwebseo

Cài đặt Quản trị Joomla

huongdansudung-caidat-quantri-Joomla-3.0

Dịch vụ Cài đặt và Hướng dẫn sử dụng joomla, giá từ 900.000 VNĐ.

Nhiều giao diện, màu sắc... phù hợp với nhiều đối tượng
Cài đặt nhanh (tối đa 8 giờ sẽ có website hoàn thiện)
Giao diện quản lý dễ sử dụng, tính tùy chỉnh cao
Nhập liệu và xuất bản nội dung cho web thật đơn giản
Chí phí quá rẻ để có website đẹp

Xem chi tiết...

ĐỀ NGHỊ BÁO GIÁ WEBSITE SEO

Đối tác của chúng tôi