找回密碼
 註冊
|註冊|登錄

伊莉討論區

搜索
請尊重及感激所有版主付出和奉獻感激所有對伊莉作出奉獻的人儲值後自動升級用戶組
你的名字火影催眠三上悠亜暗殺教室樓下的房死侍
kthbad 368iptd 558終極一班nightmar梨泰院cl風流書呆

休閒聊天興趣交流學術文化旅遊交流飲食交流家庭事務PC GAMETV GAME
熱門線上其他線上感情感性寵物交流家族門派動漫交流貼圖分享BL/GL
音樂世界影視娛樂女性頻道潮流資訊BT下載區GB下載區下載分享短片
電腦資訊數碼產品手機交流交易廣場網站事務長篇小說體育運動時事經濟
上班一族博彩娛樂
網頁設計交流Flash 設計交流
查看: 4518|回復: 7

[求助] RWD網站下的table[複製鏈接]

Rank: 1

帖子
70
積分
141 點
潛水值
2530 米
發表於 2018-5-22 10:38 PM|顯示全部樓層
如果你忘記伊莉的密碼,請在登入時按右邊出現的 '找回密碼'。輸入相關資料後送出,系統就會把密碼寄到你的E-Mail。
本帖最後由 saiyangoku 於 2018-5-22 10:39 PM 編輯

我打算製作一個RWD網頁。當中會使用到table。而具體展現形式,是希望像下圖一樣。

電腦版


手機版



把圖片放在Table中的,感覺很難可以令電腦版及手機版的效果有這種分別...如果把圖片放在table外,要令圖片的位置及border可以跟在table中沒有分別,又好像很難調整.....上網找過資料都找不到理想中的效果..請問我如何才能做到呢?
...
瀏覽完整內容,請先 註冊登入會員
附件: 你需要登錄才可以下載或查看附件。沒有帳號?註冊

使用道具檢舉

Rank: 6Rank: 6Rank: 6Rank: 6Rank: 6Rank: 6

帖子
191
積分
1177 點
潛水值
15521 米
發表於 2018-5-26 01:03 AM|顯示全部樓層
提供一下想法,這邊不建議使用table實作,原因是因為電腦版的部分看起來會使用到table的rowspan,在使用上比較不好將欄位拆到下方。

你可以改用左右兩個div區塊,左邊div擺圖片,右邊div底下再擺table,如此css只需偵測螢幕並調整兩塊div寬度。
~

使用道具檢舉

Rank: 1

帖子
70
積分
141 點
潛水值
2530 米
發表於 2018-5-27 01:04 PM|顯示全部樓層
成為伊莉的版主,你將獲得更高級和無限的權限。把你感興趣的版面一步步地發展和豐盛,那種滿足感等著你來嚐嚐喔。
sss86523 發表於 2018-5-26 01:03 AM
下載: 訪客無法瀏覽下載點,請先 註冊登入會員

提供一下想法,這邊不建議使用table實作,原因是因為電腦版的部分看起來會使用到table的rowspan,在使用上 ...

我有考慮過這做法,但由於頁面設計問題,感覺有border會較好,但用div CSS的border,跟table本身的border不相同,要做到相似似乎有困難。...
瀏覽完整內容,請先 註冊登入會員
若新密碼無法使用,可能是數據未更新。請使用舊密碼看看。

使用道具檢舉

Rank: 6Rank: 6Rank: 6Rank: 6Rank: 6Rank: 6

帖子
191
積分
1177 點
潛水值
15521 米
發表於 2018-5-27 06:51 PM|顯示全部樓層
如果發覺自己無法使用一些功能或出現問題,請按重新整理一次,並待所有網頁內容完全載入後5秒才進行操作。
table本身的border會有兩層的效果,但一樣都是框線,
其實是可以做到相似的,而且很簡單,目前想到三種方法,

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

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

3..table保持border-collapse: separate,div裡面再增加一個div,父子兩層都設定框線,父層設定padding,產生兩層的效果...
瀏覽完整內容,請先 註冊登入會員
~
若對尊貴或贊助會員有任何疑問,歡迎向我們查詢。我們的即時通或MSN: admin@eyny.com

使用道具檢舉

Rank: 2Rank: 2

帖子
569
積分
209 點
潛水值
10351 米
發表於 2018-6-14 04:06 AM|顯示全部樓層
如果瀏覽伊莉時速度太慢或無法連接,可以使用其他分流瀏覽伊莉,www01.eyny.com(02,03)。
可以考慮設計成下面這樣
再利用 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>
複製代碼
...
瀏覽完整內容,請先 註冊登入會員





使用道具檢舉

Rank: 1

帖子
70
積分
141 點
潛水值
2530 米
發表於 2018-6-18 07:05 PM|顯示全部樓層
本帖最後由 saiyangoku 於 2018-6-18 07:06 PM 編輯
ren1244 發表於 2018-6-14 04:06 AM
下載: 訪客無法瀏覽下載點,請先 註冊登入會員

可以考慮設計成下面這樣
再利用 display:none 隱藏不顯示的部分
...
瀏覽完整內容,請先 註冊登入會員
如果發覺自己無法使用一些功能或出現問題,請按重新整理一次,並待所有網頁內容完全載入後5秒才進行操作。

使用道具檢舉

Rank: 1

帖子
223
積分
152 點
潛水值
2280 米
發表於 2018-9-25 04:24 PM|顯示全部樓層
若對尊貴或贊助會員有任何疑問,歡迎向我們查詢。我們的即時通或MSN: admin@eyny.com
建議你可以用 Bootstrap ,這個里面有寫好的格式變化。從32到900以上的寬都設置好了.
成為伊莉的版主,你將獲得更高級和無限的權限。把你感興趣的版面一步步地發展和豐盛,那種滿足感等著你來嚐嚐喔。

使用道具檢舉

帖子
30
積分
28 點
潛水值
1790 米
發表於 2018-12-2 12:46 PM|顯示全部樓層
分享使你變得更實在,可以使其他人感到快樂,分享是我們的動力。今天就來分享你的資訊、圖片或檔案吧。
用Bootstrap就好了
row + col
再配合不同螢幕尺寸做好自適應設定
建議看一下官方文件
分享使你變得更實在,可以使其他人感到快樂,分享是我們的動力。今天就來分享你的資訊、圖片或檔案吧。

使用道具檢舉

您需要登錄後才可以回帖 登錄 | 註冊

Powered by Discuz!

© Comsenz Inc.

重要聲明:本討論區是以即時上載留言的方式運作,對所有留言的真實性、完整性及立場等,不負任何法律責任。而一切留言之言論只代表留言者個人意見,並非本網站之立場,用戶不應信賴內容,並應自行判斷內容之真實性。於有關情形下,用戶應尋求專業意見(如涉及醫療、法律或投資等問題)。 由於本討論區受到「即時上載留言」運作方式所規限,故不能完全監察所有留言,若讀者發現有留言出現問題,請聯絡我們。有權刪除任何留言及拒絕任何人士上載留言,同時亦有不刪除留言的權利。切勿撰寫粗言穢語、誹謗、渲染色情暴力或人身攻擊的言論,敬請自律。本網站保留一切法律權利。
回頂部