Hướng dẫn thay đổi table khi làm website mobile

03:04:00 23/04/2016

Hiện nay với các website đều phải có giao diện mobile, tức là hiển thị tốt trên các trình duyệt khác nhau, cả trên iphone, ipad, android,... Có một dạng hiển thị mà đa số các bạn đã gặp phải đó là với dạng bảng. Với dạng bảng table thì cho dù chúng ta để with: 100% đi nữa nhưng với bảng có nhiều cột thì sao? Nó sẽ bị che mất khi kích thước màn hình không đủ cho nó hiển thị?. Vậy cách giải quyết như nào?. Thiet ke web bac ninh sẽ giới thiệu với các bạn các khắc phục lỗi này. Bạn sẽ dựa vào tính năng css no more table của Bootstrap để làm điều này. 

Các bạn đã biết các thư viện css, js của Bootstrap rồi mình không nói qua nữa. mà bạn sẽ tạo file html như sau:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
 
        <title>Thiet ke web bac giang</title>
 
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
 
        <!-- Custom CSS -->
        <link href="css/styletable.css" rel="stylesheet">
 
    </head>
 
<body>
        
       <div class="container">
    <div class="row">
        <div class="col-md-12">
            <h1 class="text-center">
                Demo table
            </h1>
            <h3 class="text-center">
                Table thay doi khi kich thuoc man hinh
            </h3>
        </div>
        <div id="no-more-tables">
            <table class="col-md-12 table-bordered table-striped table-condensed cf">
                <thead class="cf">
                    <tr>
                        <th>Code</th>
                        <th>Company</th>
                        <th class="numeric">Price</th>
                        <th class="numeric">Change</th>
                        <th class="numeric">Change %</th>
                        <th class="numeric">Open</th>
                        <th class="numeric">High</th>
                        <th class="numeric">Low</th>
                        <th class="numeric">Volume</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-title="Code">AAC</td>
                        <td data-title="Company">AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
                        <td data-title="Price" class="numeric">$1.38</td>
                        <td data-title="Change" class="numeric">-0.01</td>
                        <td data-title="Change %" class="numeric">-0.36%</td>
                        <td data-title="Open" class="numeric">$1.39</td>
                        <td data-title="High" class="numeric">$1.39</td>
                        <td data-title="Low" class="numeric">$1.38</td>
                        <td data-title="Volume" class="numeric">9,395</td>
                    </tr>
                    <tr>
                        <td data-title="Code">AAD</td>
                        <td data-title="Company">ARDENT LEISURE GROUP</td>
                        <td data-title="Price" class="numeric">$1.15</td>
                        <td data-title="Change" class="numeric">+0.02</td>
                        <td data-title="Change %" class="numeric">1.32%</td>
                        <td data-title="Open" class="numeric">$1.14</td>
                        <td data-title="High" class="numeric">$1.15</td>
                        <td data-title="Low" class="numeric">$1.13</td>
                        <td data-title="Volume" class="numeric">56,431</td>
                    </tr>
                    <tr>
                        <td data-title="Code">AAX</td>
                        <td data-title="Company">AUSENCO LIMITED</td>
                        <td data-title="Price" class="numeric">$4.00</td>
                        <td data-title="Change" class="numeric">-0.04</td>
                        <td data-title="Change %" class="numeric">-0.99%</td>
                        <td data-title="Open" class="numeric">$4.01</td>
                        <td data-title="High" class="numeric">$4.05</td>
                        <td data-title="Low" class="numeric">$4.00</td>
                        <td data-title="Volume" class="numeric">90,641</td>
                    </tr>
                    <tr>
                        <td data-title="Code">ABC</td>
                        <td data-title="Company">ADELAIDE BRIGHTON LIMITED</td>
                        <td data-title="Price" class="numeric">$3.00</td>
                        <td data-title="Change" class="numeric">+0.06</td>
                        <td data-title="Change %" class="numeric">2.04%</td>
                        <td data-title="Open" class="numeric">$2.98</td>
                        <td data-title="High" class="numeric">$3.00</td>
                        <td data-title="Low" class="numeric">$2.96</td>
                        <td data-title="Volume" class="numeric">862,518</td>
                    </tr>
                    <tr>
                        <td data-title="Code">ABP</td>
                        <td data-title="Company">ABACUS PROPERTY GROUP</td>
                        <td data-title="Price" class="numeric">$1.91</td>
                        <td data-title="Change" class="numeric">0.00</td>
                        <td data-title="Change %" class="numeric">0.00%</td>
                        <td data-title="Open" class="numeric">$1.92</td>
                        <td data-title="High" class="numeric">$1.93</td>
                        <td data-title="Low" class="numeric">$1.90</td>
                        <td data-title="Volume" class="numeric">595,701</td>
                    </tr>
                    <tr>
                        <td data-title="Code">ABY</td>
                        <td data-title="Company">ADITYA BIRLA MINERALS LIMITED</td>
                        <td data-title="Price" class="numeric">$0.77</td>
                        <td data-title="Change" class="numeric">+0.02</td>
                        <td data-title="Change %" class="numeric">2.00%</td>
                        <td data-title="Open" class="numeric">$0.76</td>
                        <td data-title="High" class="numeric">$0.77</td>
                        <td data-title="Low" class="numeric">$0.76</td>
                        <td data-title="Volume" class="numeric">54,567</td>
                    </tr>
                    <tr>
                        <td data-title="Code">ACR</td>
                        <td data-title="Company">ACRUX LIMITED</td>
                        <td data-title="Price" class="numeric">$3.71</td>
                        <td data-title="Change" class="numeric">+0.01</td>
                        <td data-title="Change %" class="numeric">0.14%</td>
                        <td data-title="Open" class="numeric">$3.70</td>
                        <td data-title="High" class="numeric">$3.72</td>
                        <td data-title="Low" class="numeric">$3.68</td>
                        <td data-title="Volume" class="numeric">191,373</td>
                    </tr>
                    <tr>
                        <td data-title="Code">ADU</td>
                        <td data-title="Company">ADAMUS RESOURCES LIMITED</td>
                        <td data-title="Price" class="numeric">$0.72</td>
                        <td data-title="Change" class="numeric">0.00</td>
                        <td data-title="Change %" class="numeric">0.00%</td>
                        <td data-title="Open" class="numeric">$0.73</td>
                        <td data-title="High" class="numeric">$0.74</td>
                        <td data-title="Low" class="numeric">$0.72</td>
                        <td data-title="Volume" class="numeric">8,602,291</td>
                    </tr>
                    <tr>
                        <td data-title="Code">AGG</td>
                        <td data-title="Company">ANGLOGOLD ASHANTI LIMITED</td>
                        <td data-title="Price" class="numeric">$7.81</td>
                        <td data-title="Change" class="numeric">-0.22</td>
                        <td data-title="Change %" class="numeric">-2.74%</td>
                        <td data-title="Open" class="numeric">$7.82</td>
                        <td data-title="High" class="numeric">$7.82</td>
                        <td data-title="Low" class="numeric">$7.81</td>
                        <td data-title="Volume" class="numeric">148</td>
                    </tr>
                    <tr>
                        <td data-title="Code">AGK</td>
                        <td data-title="Company">AGL ENERGY LIMITED</td>
                        <td data-title="Price" class="numeric">$13.82</td>
                        <td data-title="Change" class="numeric">+0.02</td>
                        <td data-title="Change %" class="numeric">0.14%</td>
                        <td data-title="Open" class="numeric">$13.83</td>
                        <td data-title="High" class="numeric">$13.83</td>
                        <td data-title="Low" class="numeric">$13.67</td>
                        <td data-title="Volume" class="numeric">846,403</td>
                    </tr>
                    <tr>
                        <td data-title="Code">AGO</td>
                        <td data-title="Company">ATLAS IRON LIMITED</td>
                        <td data-title="Price" class="numeric">$3.17</td>
                        <td data-title="Change" class="numeric">-0.02</td>
                        <td data-title="Change %" class="numeric">-0.47%</td>
                        <td data-title="Open" class="numeric">$3.11</td>
                        <td data-title="High" class="numeric">$3.22</td>
                        <td data-title="Low" class="numeric">$3.10</td>
                        <td data-title="Volume" class="numeric">5,416,303</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
   
</div>
 
        <!-- jQuery -->
        <script src="http://code.jquery.com/jquery.min.js"></script>
 
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

Với các  file js các bạn đã có còn file styletable.css sẽ như này:

@media only screen and (max-width: 800px) {
    
    /* Force table to not be like tables anymore */
    #no-more-tables table, 
    #no-more-tables thead, 
    #no-more-tables tbody, 
    #no-more-tables th, 
    #no-more-tables td, 
    #no-more-tables tr { 
        display: block; 
    }
 
    /* Hide table headers (but not display: none;, for accessibility) */
    #no-more-tables thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
 
    #no-more-tables tr { border: 1px solid #ccc; }
 
    #no-more-tables td { 
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        white-space: normal;
        text-align:left;
    }
 
    #no-more-tables td:before { 
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align:left;
        font-weight: bold;
    }
 
    /*
    Label the data
    */
    #no-more-tables td:before { content: attr(data-title); }
}

Vậy là xong, các bạn có thể coppy vào và chạy thử xem kết quả như nào nhé!.

Đánh giá:

0/5 (0 bình chọn)

 

Đang xử lý...