伊莉討論區

標題: RWD網站下的table [打印本頁]
作者: saiyangoku    時間: 2018-5-22 10:38 PM     標題: RWD網站下的table

提示: 作者被禁止或刪除 內容自動屏蔽
作者: sss86523    時間: 2018-5-26 01:03 AM

提供一下想法，這邊不建議使用table實作，原因是因為電腦版的部分看起來會使用到table的rowspan，在使用上比較不好將欄位拆到下方。

你可以改用左右兩個div區塊，左邊div擺圖片，右邊div底下再擺table，如此css只需偵測螢幕並調整兩塊div寬度。
作者: saiyangoku    時間: 2018-5-27 01:04 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: sss86523    時間: 2018-5-27 06:51 PM

table本身的border會有兩層的效果，但一樣都是框線，
其實是可以做到相似的，而且很簡單，目前想到三種方法，

1.將table的css加上 border-collapse: collapse;

2.table保持border-collapse: separate，讓div增加before區塊並設定框線，這樣就會有兩層的效果

3..table保持border-collapse: separate，div裡面再增加一個div，父子兩層都設定框線，父層設定padding，產生兩層的效果
作者: ren1244    時間: 2018-6-14 04:06 AM

可以考慮設計成下面這樣
再利用 display:none 隱藏不顯示的部分


完整的 html 跟 css
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title>RWD</title>
  6. </head>
  7. <body>
  8.         <table>
  9.                 <tr class="img-rwd-1">
  10.                         <td class="ex-1" colspan="3"><img src="https://svgshare.com/i/72t.svg"></td>
  11.                 </tr>
  12.                 <tr>
  13.                         <td rowspan="4" class="img-rwd-2"><img src="https://svgshare.com/i/72t.svg"></td>
  14.                         <td class="ex-2">1</td>
  15.                         <td class="ex-2">a</td>
  16.                 </tr>
  17.                 <tr>
  18.                         <td class="ex-2">2</td>
  19.                         <td class="ex-2">b</td>
  20.                 </tr>
  21.                 <tr>
  22.                         <td class="ex-2">3</td>
  23.                         <td class="ex-2">c</td>
  24.                 </tr>
  25.                 <tr>
  26.                         <td class="ex-2">4</td>
  27.                         <td class="ex-2">d</td>
  28.                 </tr>
  29.         </table>
  30.         <style type="text/css">
  31.                 table,tr,td{
  32.                         border:1px solid;
  33.                 }
  34.                 table{
  35.                         border-collapse: separate;
  36.                         border-spacing:10px;
  37.                         width:100%;
  38.                 }
  39.                 td{
  40.                         text-align:center;
  41.                 }
  42.                 .ex-1{
  43.                         width:100%;
  44.                 }
  45.                 .ex-2{
  46.                         width:50%;
  47.                 }
  48.                 img{
  49.                         width:320px;
  50.                 }
  51.                 .img-td-1{
  52.                         width:100%;
  53.                 }
  54.                 @media only screen and ( min-width : 900px){
  55.                         .img-rwd-1{
  56.                                 display:none;
  57.                         }
  58.                 }
  59.                 @media not screen and ( min-width : 900px){
  60.                         .img-rwd-2{
  61.                                 display:none;
  62.                         }
  63.                 }
  64.         </style>
  65. </body>
  66. </html>
複製代碼
作者: saiyangoku    時間: 2018-6-18 07:05 PM

提示: 作者被禁止或刪除 內容自動屏蔽
作者: xiaofu95    時間: 2018-9-25 04:24 PM

建議你可以用 Bootstrap ,這個里面有寫好的格式變化。從32到900以上的寬都設置好了.
作者: hz725fish    時間: 2018-12-2 12:46 PM

用Bootstrap就好了
row + col
再配合不同螢幕尺寸做好自適應設定
建議看一下官方文件



歡迎光臨 伊莉討論區 (https://www71.eyny.com/) Powered by Discuz!