Hướng dẫn tạo Responsive Tables đơn giản với CSS - Demo
RUN
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h2 { text-align: center; } /* Định dạng cho bảng dữ liệu*/ table { margin: auto; border-collapse: collapse; border-spacing: 0; width: 60%; border: 1px solid #ddd; } /* Định dạng cho các cột*/ th, td { border: none; text-align: left; padding: 8px; } /* Tạo thanh sroll ngang nếu chiều dài nội dung quá lớn*/ #table { overflow-x: auto; } /* Thiết lập màu nền cho các ô*/ tr:nth-child(even){ background-color: #f2f2f2 } </style> </head> <body> <h2>Freetuts.net hướng dẫn tạo Responsive Table</h2> <p>Các bạn thu nhỏ kích thước của trình duyệt để xem kết quả!</p> <div id="table"> <table> <tr> <th>Tên cầu thủ\Mùa giải</th> <th>06/07</th> <th>07/08</th> <th>08/09</th> <th>09/10</th> <th>10/11</th> <th>11/12</th> <th>12/13</th> <th>13/14</th> <th>14/15</th> <th>15/16</th> <th>16/17</th> </tr> <tr> <td>Lionel Messi</td> <td>50</td> <td>44</td> <td>46</td> <td>74</td> <td>55</td> <td>24</td> <td>54</td> <td>55</td> <td>66</td> <td>65</td> <td>99</td> </tr> <tr> <td>Neymar</td> <td>21</td> <td>23</td> <td>44</td> <td>33</td> <td>24</td> <td>42</td> <td>55</td> <td>44</td> <td>33</td> <td>22</td> <td>45</td> </tr> <tr> <td>Luis Suarez</td> <td>12</td> <td>14</td> <td>54</td> <td>32</td> <td>23</td> <td>44</td> <td>55</td> <td>66</td> <td>45</td> <td>66</td> <td>75</td> </tr> </table> </div> </body> </html>
PHÓNG TO