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

伊莉討論區

搜索
請尊重及感激所有版主付出和奉獻尊貴會員無限下載附件認識好友、聊天,分享生活趣事
你的名字蘿莉火影暗殺教室火影忍者出包王女死侍
魔王四月は君みーやdtt 038s cute 3全職高手juy 951

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

[2019][海賊王狂熱行

[繁]你遭難了嗎?09-

[繁]炎炎消防隊 第08

[繁][閩南語]霹靂靖玄

【日語/繁中】2019四

[繁]你遭難了嗎?10-H
網頁設計交流Flash 設計交流
查看: 3418|回復: 7

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

Rank: 1

帖子
70
積分
141 點
潛水值
2530 米
發表於 2018-5-22 10:38 PM|顯示全部樓層
若瀏覽伊莉的時侯發生問題或不正常情況,請使用Internet Explorer(I.E)。
本帖最後由 saiyangoku 於 2018-5-22 10:39 PM 編輯

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

電腦版


手機版



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

使用道具檢舉

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

帖子
191
積分
1177 點
潛水值
15391 米
發表於 2018-5-26 01:03 AM|顯示全部樓層
成為伊莉的版主,你將獲得更高級和無限的權限。把你感興趣的版面一步步地發展和豐盛,那種滿足感等著你來嚐嚐喔。
提供一下想法,這邊不建議使用table實作,原因是因為電腦版的部分看起來會使用到table的rowspan,在使用上比較不好將欄位拆到下方。

你可以改用左右兩個div區塊,左邊div擺圖片,右邊div底下再擺table,如此css只需偵測螢幕並調整兩塊div寬度。
~
所有積分大於負-100的壞孩子,將可獲得重新機會成為懲罰生,權限跟幼兒生一樣。

使用道具檢舉

Rank: 1

帖子
70
積分
141 點
潛水值
2530 米
發表於 2018-5-27 01:04 PM|顯示全部樓層
若對尊貴或贊助會員有任何疑問,歡迎向我們查詢。我們的即時通或MSN: admin@eyny.com
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 點
潛水值
15391 米
發表於 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,產生兩層的效果...
瀏覽完整內容,請先 註冊登入會員
~
分享使你變得更實在,可以使其他人感到快樂,分享是我們的動力。今天就來分享你的資訊、圖片或檔案吧。

使用道具檢舉

Rank: 2Rank: 2

帖子
567
積分
215 點
潛水值
9561 米
發表於 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>
複製代碼
...
瀏覽完整內容,請先 註冊登入會員





回覆中加入附件並不會使你增加積分,請使用主題方式發佈附件。

使用道具檢舉

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 隱藏不顯示的部分
...
瀏覽完整內容,請先 註冊登入會員
若對尊貴或贊助會員有任何疑問,歡迎向我們查詢。我們的即時通或MSN: admin@eyny.com

使用道具檢舉

Rank: 1

帖子
213
積分
139 點
潛水值
2080 米
發表於 2018-9-25 04:24 PM|顯示全部樓層
成為伊莉的版主,你將獲得更高級和無限的權限。把你感興趣的版面一步步地發展和豐盛,那種滿足感等著你來嚐嚐喔。
建議你可以用 Bootstrap ,這個里面有寫好的格式變化。從32到900以上的寬都設置好了.
如果你忘記伊莉的密碼,請在登入時按右邊出現的 '找回密碼'。輸入相關資料後送出,系統就會把密碼寄到你的E-Mail。

使用道具檢舉

Rank: 1

帖子
30
積分
66 點
潛水值
1420 米
發表於 2018-12-2 12:46 PM|顯示全部樓層
若對尊貴或贊助會員有任何疑問,歡迎向我們查詢。我們的即時通或MSN: admin@eyny.com
用Bootstrap就好了
row + col
再配合不同螢幕尺寸做好自適應設定
建議看一下官方文件
若有安裝色情守門員,可用無界、自由門等軟件瀏覽伊莉。或使用以下網址瀏覽伊莉: http://www.eyny.com:81/index.php

使用道具檢舉

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

Powered by Discuz!

© Comsenz Inc.

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