iT邦幫忙

0

表格RWD的方法

  • 分享至 

  • xImage

不好意思各位前輩,想問網頁表格RWD的最好方法是哪一種(不是帶入滾輪那種)?

我上網爬了文,有人覺得使用傳統tr td要RWD的話是挺困難的,所以也有人利用純div去排,搭配CSS,此外小弟我也利用div和CSS Flex實際寫了一遍也是可行,請問各位前輩還有更好的寫法嗎?

看更多先前的討論...收起先前的討論...
ccutmis iT邦高手 2 級 ‧ 2018-09-14 09:37:23 檢舉
不確定這跟你說的是不是一樣 寫個簡單例子給你參考
<html>
<style>
.aaa,.bbb,.ccc{background-color:#abc;}

/* Media Query 當寬度 < 480 px 時將載入這段 CSS */
@media only screen and (max-width: 480px) {
.ccc{display:none;}
.aaa{background-color:#f00;}
}
</style>
<body>
<table width="100%" border="1">
<tr>
<td class="aaa">aaa</td>
<td class="bbb">bbb</td>
<td class="ccc">ccc</td>
</tr>
<tr>
<td class="aaa">aaa</td>
<td class="bbb">bbb</td>
<td class="ccc">ccc</td>
</tr>
</table>
</body>
</html>
不好意思我指的是兩攔式表格,在手機模式下變單欄,因此我應該不會下display:none,我是用div和 flex-wrap在手機模式下換行這樣寫,不知道還有沒有更好的方法
larrykkk iT邦新手 5 級 ‧ 2018-09-14 11:37:30 檢舉
沒code不知道你在問啥
ccutmis iT邦高手 2 級 ‧ 2018-09-14 13:38:16 檢舉
確實同larrykkk所說沒code很難意會,我原本舉的例是三欄表格若是在寬度小於480px時會自動把第三欄隱藏,故在那裡用到display:none;

如果是像你說的,兩攔式表格,在手機模式下變單欄,我用上面的code改寫個例子給你參考:
<html>
<style>
.aaa,.ccc{background-color:#abc;}
/* Media Query 當寬度 < 480 px 時將載入這段 CSS */
@media only screen and (max-width: 480px) {
table tr td{display:block;}
.aaa{background-color:#f00;}
}
</style>
<body>
<table width="100%" border="1">
<tr>
<td class="aaa">aaa</td>
<td class="ccc">ccc</td>
</tr>
<tr>
<td class="aaa">aaa</td>
<td class="ccc">ccc</td>
</tr>
</table>
</body>
</html>
我應該不會用tr td寫,我的結構如下,因為用td寫的話,td裡還要塞兩個格子,不然就是用偽元素,感覺有點難寫,當然有人寫得出來的話也可以參考一下0.0
這是我用flex寫的,況且我只是來問寫法,有沒有code,給個方向大概就知道怎麼寫了
<div class="table">
<div class="group_tr">
<div class="title"><span>name</span></div>
<div class="keyin"><input type="text"></div>
</div>
<div class="group_tr">
<div class="title">age</div>
<div class="keyin"><input type="text"></div>
</div>
<div class="group_tr">
<div class="title"><span>add</span></div>
<div class="keyin"><input type="text"></div>
</div>
<div class="group_tr">
<div class="title"><span>mail</span></div>
<div class="keyin"><input type="text"></div>
</div>
<div class="group_tr big">
<div class="title"><span>sub</span></div>
<div class="keyin big">
<input type="radio" name="" id=""><span>是</span>
<input type="radio" name="" id=""><span>否</span>
</div>
</div>
</div>

/////////////////////////////////////SCSS
.table{
display: flex;
width: 98%;
border:black solid 1px;
border-style: solid none none solid;
flex-wrap: wrap;
.group_tr{
width: calc(50% );
display: flex;
height: 50px;
line-height: 50px;
@include p1{
width: calc(100% );
}///p1是斷點
.title{
width: 100px;
text-align: center;
}
.keyin{
width: calc(100% - 100px);
input[type=text]{
width: 90%;
margin-left: 10px;
}
}
}
}
.group_tr.big{
width: calc(100% );
}
.title,.keyin{
border-style: none solid solid none;
border-width: 1px;
border-color: black;
}
ccutmis iT邦高手 2 級 ‧ 2018-09-20 12:03:30 檢舉
語意化html是基本中的基本
為了排版硬要把表格弄成<div class=table><div class=tr>...略
我只能說 這是本末倒置的作法 話只說到這 懶的回了 good luck!
https://sofree.cc/css-table/
https://www.zhihu.com/question/20003535
痾其實我也不想回答你,多爬爬文再來回你會看到不一樣的東西
table這東西現在很少人再用了,能真的寫出超屌RWD,我只能說猛。
如果你腦袋還停留在10年前,那你就繼續用table吧,good luck!
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0

第一次知道columns的用法,感謝分享!

1
RenZhou
iT邦新手 4 級 ‧ 2018-09-19 10:18:22

可以參考這種排版
https://quasar-framework.org/components/datatable.html

把手機版的表格做成卡片型式
一般的ui framework應該都有 col 這種 flex
如果沒有 也可以透過CSS去判斷裝置大小 把原本表格隱蔽起來 再顯示卡片版的表格

來研究一下

我要發表回答

立即登入回答