表格RWD的方法

表格 rwd 網頁設計

clps935419 2018-09-14 09:20:30 ‧ 6265 瀏覽

分享至

不好意思各位前輩，想問網頁表格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>

clps935419 iT邦新手 5 級 ‧ 2018-09-14 09:48:55 檢舉

不好意思我指的是兩攔式表格，在手機模式下變單欄，因此我應該不會下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>

clps935419 iT邦新手 5 級 ‧ 2018-09-19 15:58:45 檢舉

我應該不會用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;
}

我應該不會用tr td寫，我的結構如下，因為用td寫的話，td裡還要塞兩個格子，不然就是用偽元素，感覺有點難寫，當然有人寫得出來的話也可以參考一下0.0
這是我用flex寫的，況且我只是來問寫法，有沒有code，給個方向大概就知道怎麼寫了
&lt;div class=&quot;table&quot;&gt;
                    &lt;div class=&quot;group_tr&quot;&gt;
                        &lt;div class=&quot;title&quot;&gt;&lt;span&gt;name&lt;/span&gt;&lt;/div&gt;
                        &lt;div class=&quot;keyin&quot;&gt;&lt;input type=&quot;text&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;group_tr&quot;&gt;
                        &lt;div class=&quot;title&quot;&gt;age&lt;/div&gt;
                        &lt;div class=&quot;keyin&quot;&gt;&lt;input type=&quot;text&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;group_tr&quot;&gt;
                        &lt;div class=&quot;title&quot;&gt;&lt;span&gt;add&lt;/span&gt;&lt;/div&gt;
                        &lt;div class=&quot;keyin&quot;&gt;&lt;input type=&quot;text&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;group_tr&quot;&gt;
                        &lt;div class=&quot;title&quot;&gt;&lt;span&gt;mail&lt;/span&gt;&lt;/div&gt;
                        &lt;div class=&quot;keyin&quot;&gt;&lt;input type=&quot;text&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;group_tr big&quot;&gt;
                        &lt;div class=&quot;title&quot;&gt;&lt;span&gt;sub&lt;/span&gt;&lt;/div&gt;
                        &lt;div class=&quot;keyin big&quot;&gt;
                            &lt;input type=&quot;radio&quot; name=&quot;&quot; id=&quot;&quot;&gt;&lt;span&gt;是&lt;/span&gt;
                            &lt;input type=&quot;radio&quot; name=&quot;&quot; id=&quot;&quot;&gt;&lt;span&gt;否&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

/////////////////////////////////////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!

clps935419 iT邦新手 5 級 ‧ 2018-09-20 15:50:07 檢舉

https://sofree.cc/css-table/
https://www.zhihu.com/question/20003535
痾其實我也不想回答你，多爬爬文再來回你會看到不一樣的東西
table這東西現在很少人再用了，能真的寫出超屌RWD，我只能說猛。
如果你腦袋還停留在10年前，那你就繼續用table吧，good luck!

登入發表討論