響應式CSS表格

我創建了一個表格寬度爲4的圖像，這些圖像放置在一行和四列（1x4）中。響應式CSS表格

<table class="insrtTable"> 

    <tr> 
     <td><img src=Guitarra.png></td> 
     <td><img src=Bajo.png></td> 
     <td><img src=Teclado.png></td> 
     <td><img src=Ukelete.png></td> 
    </tr> 
</table>

我的問題是，我需要看到兩行兩列（2×2）在我的手機中的圖像。（像這樣）

<table class="insrtTable"> 

    <tr> 
      <td><img src=Guitarra.png></td> 
      <td><img src=Bajo.png></td>  
    </tr> 
    <tr> 
      <td><img src=Teclado.png></td> 
      <td><img src=Ukelete.png></td> 
    </tr> 
</table>

我怎麼能這樣做？我看到很多負責任的表格，將1列和4行轉換成4列和1行，但我找不到適合我的人。

來源

2017-09-15 Rolando Díaz Vilches

您要查找的單詞是「響應式」，而不是「負責任」。

我該怎麼做？我看到很多負責任的表格，將1列和4行轉換爲4列和1行，但我無法找到適合我的工作表。

最多使用Bootstrap列來實現此目的。

來源

2017-09-15 17:40:56 Strikegently

我不好，我現在編輯 –

沒問題。瞭解正確的術語可以使研究問題解決方案變得更容易。 – Strikegently

-1

無法用表格進行響應式設計。使用其他方式。我建議flex容器或浮動和清除。 This網站是爲flex容器。

來源

2017-09-15 17:42:51

要回答的實際問題，是的，你可以讓有些敏感的表，但是這將涉及unnecessary hacking因爲table S其中從來就不是響應早在70年代，他們創建時。而當你試圖用更高級的東西來做時，你可能會用盡所有的選擇。

一種現代的CSS佈局方法是使用類似flexbox的東西。你可以解決這個問題是這樣的：

<div class="container"> 
    <div class="col">1</div> 
    <div class="col">2</div> 
    <div class="col">3</div> 
    <div class="col">4</div> 
</div> 


.container { 
    display: flex; 
    flex-wrap: wrap; 
} 

.container > .col { 
    background: tomato; 
    padding: 16px; 
    border: 5px solid black; 
    width: 50%; 
} 

@media (min-width: 599px) { 
    .container > .col { 
    width: 25% !important; 
    } 
}

看到它在這裏的行動：https://codepen.io/nicooga/pen/MEwZgZ。關鍵是flex-wrap: wrap，如果元素超過容器的大小，它允許元素溢出到下一行。

所有您需要了解的有關flexbox的信息，請訪問：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

似乎有一個全新的本地CSS網格系統似乎做了所有這些對flexbox和更多：https://css-tricks.com/snippets/css/complete-guide-grid/偉大。

來源

2017-09-15 17:59:39 nicooga

你可以試試這個簡單的解決方案。

首先，添加要打破行（TD帶班RESP）

<table class="insrtTable"> 

     <tr> 
      <td><img src="img1.png"></td> 
      <td><img src="img2.png"></td> 
      <td class="resp"></td> 
      <td class=""><img src="img3.png"></td> 
      <td class=""><img src="img4.png"></td> 
     </tr> 
    </table>

然後應用以下樣式表中的一個TD佔位符：

@media only screen and (max-width: 767px), (min-device-width: 768px) and (max-device-width: 1024px) { 

    thead, tbody, th, td.resp, tr { 
     display: block; 
    } 
}

如果減少了瀏覽器窗口的大小在768px以下，它會在第一行打破2個圖像，在第二行打破2個。

您可以將此方法應用於超過4列，並在需要的位置設置佔位符。

來源

2017-09-15 19:28:59 RFex

嘗試使用像Flexbox或Bootstrap網格系統這樣的網格系統。你也可以製作自己的網格系統，但你只需重新發明輪子。

響應速度也綁你如何標記你的CSS屬性，一個簡單的例子： -

<div class="container"> 
Text content </div> 

.container { 
width:3px; <!-- vs width:3%; --> }

使用％值，而不是像素硬編碼值，可以使你的網站的響應的差異。

開發自己的網格中的有用的源系統 - https://zellwk.com/blog/responsive-grid-system/

來源

2017-09-15 19:29:49 zuif

響應式CSS表格

回答

相關問題