如何使這個表結構響應

我想獲得具有％而不是硬編碼像素值的resposive表，但是當我調整窗口大小時，我想要放置圖像的列變得非常小。如何使這個表結構響應

HTML：

<TABLE BORDER=1 style="width: 90%; margin: 5%;"> 
    <TR> 
     <TD width="70%"> 
      <h4>ABOUT US</h4> 
      <p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      </p> 
      <p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p> 
      <br/><br/><br/><br/><br/> 
     </TD> 
     <TD width="30%" rowspan=2><img src="images/foto.jpeg"></TD> 
    </TR> 
    <TR> 
     <TD> 
      <h4>MEET THE TEAM</h4> 
      <p>content</p> 
     </TD> 
</TABLE>

jsFiddle

有沒有辦法做到這一點，這樣的表以這種方式調整的column 2成爲row 3？如果我不得不使用div來做同樣的事情，那麼我會好的。

來源

2013-04-27 Prateek

我不明白你在問什麼。你是否想要設置rowspan和colspan？如果是這樣，爲了什麼？真的很難理解你的意思。 – Dmitry 2013-04-27 17:16:24

您想做的事：？ – Dmitry 2013-04-27 17:18:15

實際上，我使用表格在兩列網格中劃分了我的頁面，而在右側，我只能放置一個圖像，而在第一列的兩行左側，我必須寫一些東西。我認爲它會做。事實上它只是，它沒有更多的迴應。我想要一個響應式替代方案，即使沒有表？ – Prateek 2013-04-27 17:18:33

這裏有一個簡單的規則，當談到迴應式網頁設計（或任何一般的網頁設計）...

決不

曾經

...使用表定義頁面的佈局。表格旨在呈現表格數據，而不是定義頁面的佈局。使用div元素代替

請注意一個有用的鏈接是http://shouldiusetablesforlayout.com/。

來源

2013-04-27 17:26:01

請勿使用表格進行佈局。無論如何，你無法輕易地用CSS來做任何事情，因爲你必須重寫多個元素的顯示屬性。

來源

2013-04-27 17:13:58 imsky

+1對此答案。在大多數情況下，用於佈局的表格是一個糟糕的主意，並且對於響應式設計中的佈局是一個可怕的想法。所以解決這個問題的最好方法是避免它並使用更好的佈局實踐。 – DannyB 2013-04-27 17:37:51

佈局表格仍然是基於HTML的電子郵件必須的表格，沒有其他選擇。 – Wyck 2013-05-21 22:35:42

表不應該被用於佈局（如@davblayn指出的），但如果你想/需要使用它們：

HTML：

<TABLE BORDER=1 style="width: 90%; margin: 5%;"> 
    <TR> 
     <TD id='firstItem' width="70%"> 
      <h4>ABOUT US</h4> 
      <p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
      </p> 
      <p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p> 
      <br/><br/><br/><br/><br/> 
     </TD> 
     <TD width="30%" id='responsiveItem' rowspan=2><img src="images/foto.jpeg"></TD> 
    </TR> 
    <TR> 
     <TD> 
      <h4>MEET THE TEAM</h4> 
      <p>content</p> 
     </TD> 
</TABLE>

CSS：

@media all and (max-width: 699px) and (min-width: 520px) { 
    td{ 
     width:100%; 
    } 
    #firstItem{ 
     display:block; 
    } 
    #responsiveItem{ 
     float:left; 
    } 
}

jsFiddle

玩調整JSFiddle窗口，column，當圖像沒有足夠的空間時，圖像將下降到row。

來源

2013-04-27 17:23:55 1andsock

嗨，歡迎來到Stack Overflow。我意識到提問者已經將所有代碼發佈在jsFiddle中，但是如果您可以在回答或問題中發佈您的代碼，將非常感激。目標是在未來輕鬆幫助人們，而不僅僅是原始的海報。出於這個原因，解釋發生了什麼，爲什麼也總是讚賞。非常感謝，祝你好運！ – Ben 2013-04-27 18:40:51

-1因爲表不應該用於設計/佈局目的 – 2013-10-02 16:02:09

@NicWortel，我明白這一點。但提問者使用表格，並且由於另一個用戶創建了「最佳實踐」答案，我創建了一個解決OP當前實現（使用表格）的答案。請參閱：http://meta.stackexchange.com/問題/ 145909 /最佳做法 - 答案 - 禮儀瞭解更多詳情。 – 1andsock 2013-10-08 22:31:36

如果「響應」你的意思是，當文本不適合不走扭曲，並保持圖像尺寸（圖像沒能很好的比例），那麼你可以使用這個：

<table border="1" width="800px" height="250" style="min-width:800px; width: 90%; margin: 5%;"> 
     <tr> 
     <td> 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
     </td> 
     <td style="height: 250px; width: 250px;" rowspan="2">CONTENT</td> 
     </tr> 
     <tr> 
     <td> 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
CONTENT CONTENT CONTENT CONTENT 
     </td> 
     </tr> 
    </table>

基本上，你需要設置最小的空間來容納內容，然後可以儘可能多地向外擴展。

雖然是的，但表格通常會被人們所不悅，它是另一種形式的「你爲什麼要這樣做」，並且由於問題特別要求表格，所以不需要完全改變問題來滿足你的寵物。

對於網站來說，表格工作正常，他們的主要問題是他們需要一段時間才能建立起來，並且一旦建立起來，他們就會永遠保持這種狀態，如果不重新制表，就不可能進行更改。

這似乎並沒有出現在這裏的主要問題。

來源

2013-04-27 17:59:30 Dmitry

如何使這個表結構響應

回答

決不

曾經

曾經

相關問題