前端筆記

用CSS達成非滾動式表格。使用偽元素:before :after 取出<td>中的屬性質來達成。

<table>
    <thead>
        <tr>
            <th>品名</th>
            <th>數量</th>
            <th>單價</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="品名">牛肉麵</td>
            <td data-label="數量">2</td>
            <td data-label="單價">120元</td>
        </tr>
        <tr>
            <td data-label="品名">肉絲麵</td>
            <td data-label="數量">3</td>
            <td data-label="單價">60元</td>
        </tr>
    </tbody>
</table>

螢幕小於600px時將 td 屬性值取出放置於內容顯示:
偽元素設定:

@media screen and (max-width: 600px) {
  table td:before {
    content: attr(data-label);
    float: left;
    text-transform: uppercase;
    font-weight: bold;
  }
}

參考網站:http://www.webhek.com/post/responsive-tables-in-pure-css.html