參考資料

Responsive Tables Demo

 

其實這件事一直在心頭覺得好煩喔= =

但還是沒開始，先在這邊記錄好了XDD

html

<table class="rwd-table">

  <thead>

    <tr>

      <th>name</th>

      <th>age</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td data-title="name">kaikai</td>

      <td data-title="age">18</td>

    </tr>

  </tbody>

</table>

 

css

@media screen and (max-width: 640px) {
.rwd-table thead{
display: none;
}

.rwd-table th {
display: none;
line-height:56px;
}

.rwd-table td {
display: block;
border: none;
line-height:56px;
}

.rwd-table td:before {
content: attr(data-title) " ";
float: left;
font-weight: bold;
padding-right:10px;
}
}

 

其實上面參考資料就非常清楚了耶

主要是在CSS設定，在解析度比較小的狀況下讓他換個方式排列。

content: attr(data-title); 這行影響的XDDD

 

2018/06/11 (一)

//當在vue使用vuetify時候呢

但我還在想要怎樣用在vue上面，而且...還有使用vuetify.js

結果用完發現很簡單阿，阿哈哈哈哈哈阿可惡我之前到底偷懶什麼啦

我是使用vuetify裡面的 data table(v-data-table)

 

<v-data-table
:headers="headers"
:items="user"
sort-icon="keyboard_arrow_up"
hide-actions
class="elevation-1 rwd-table"
>

<template slot="items" slot-scope="props">
<td :data-title="get_data_title(headers,'name')">
{{ props.item.name }}</td>
<td :data-title="get_data_title(headers,'age')">
{{ props.item.age }}</td>
</template>
</v-data-table>

 

1. CSS同上面的

2. class 要有 rwd-table

3. 最主要的data-title 我是寫個function去headers取得中文名稱

 

其實這樣就OK惹，完成。

 

 

arrow
arrow
    文章標籤
    table css vuetify vue table rwd
    全站熱搜

    Kaikai凱開 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄