Bữa giờ có anh em hỏi mình cách hiển thị lượt view bài viết như trên website của mình, thì nay mình xin chia sẻ với anh em cách làm nhé.
-
-
HTML
-
|
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 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<div class="grid"> <div class="grid-container"> <table> <thead> <tr class="header"> <th>User Name <div>User Name</div> </th> <th>User Name <div>User Name</div> </th> <th>User Name <div>User Name</div> </th> <th>Education <div>Education</div> </th> <th>Location <div>Location</div> </th> <th>Location <div>Location</div> </th> </tr> </thead> <tbody> <tr> <td>Madhav Sai</td> <td>MBA</td> <td>Nagpur</td> <td>Chennai</td> <td>Nagpur</td> <td>Chennai</td> </tr> <tr> <td>Suresh Dasari</td> <td>B.Tech</td> <td>Chennai</td> <td>Chennai</td> <td>Rohini Dasari</td> <td>Msc</td> </tr> <tr> <td>Madhav Sai</td> <td>MBA</td> <td>Nagpur</td> <td>Chennai</td> <td>Nagpur</td> <td>Chennai</td> </tr> <tr> <td>Madhav Sai</td> <td>MBA</td> <td>Nagpur</td> <td>Chennai</td> <td>Nagpur</td> <td>Chennai</td> </tr> <tr> <td>Madhav Sai</td> <td>MBA</td> <td>Nagpur</td> <td>Chennai</td> <td>Nagpur</td> <td>Chennai</td> </tr> <tr> <td>Madhav Sai</td> <td>MBA</td> <td>Nagpur</td> <td>Chennai</td> <td>Nagpur</td> <td>Chennai</td> </tr> <tr> <td>Madhav Sai</td> <td>MBA</td> <td>Nagpur</td> <td>Chennai</td> <td>Nagpur</td> <td>Chennai</td> </tr> <tr> <td>Madhav Sai</td> <td>MBA</td> <td>Nagpur</td> <td>Chennai</td> <td>Nagpur</td> <td>Chennai</td> </tr> </tbody> </table> </div> </div> |
CSS
|
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 |
.grid { position: relative; border: 1px solid #000; padding-top: 37px; background: #B34C00; width:100%; } .grid-container { overflow-y: auto; height: 200px; } table { border-spacing: 0; width:100%; } td + td { border-left:1px solid #000; } td, th { border-bottom:1px solid #000; background: #fff; color: #000; padding: 10px 25px; } th { height: 0; line-height: 0; padding-top: 0; padding-bottom: 0; color: transparent; border: none; white-space: nowrap; } th div{ position: absolute; background: transparent; color: #fff; padding: 9px 25px; top: 0; margin-left: -25px; line-height: normal; border-left: 1px solid #800; } |
URL xem thêm https://codepen.io/ajjujaiswal/pen/rKLdLz
Chúc các bạn thành công.
