重新部署移動版本的第一列表下面的第二列

我想重新安置第一列下方的第二列表。我正在使用html表格。現在它[看起來像]：Screenshot或live site。但在移動版本中，它仍然保留這兩列！我怎樣才能把第二欄列在第一欄？ HTML代碼，你可以通過在文章開頭的鏈接（它是用於商務，餐桌服務的網站上）打開或看這裏：重新部署移動版本的第一列表下面的第二列

HTML： `

<table class="TableOfReasons"> 
         <!--One block--> 
         <tr><td class="feature-title"><h4>Odours elimination</h4></td><td class="right-clmn feature-title"><h4>Communal service</h4></td></tr> 
         <tr><td class="feature-img"><image src="images/1.jpg" width="250px"></td><td class="right-clmn feature-img"><image src="images/5.png" height="167px"></td></tr> 
         <tr><td class="feature-button"><a href="/more-page.php?language=en&name=removing-smell&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=communal-service&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr> 
         <!--End of one block--> 

         <!--One block--> 
         <tr><td class="feature-title"><h4>Stimulation of avian growth <br> and prevention of infectious diseases </h4></td><td class="right-clmn feature-title"><h4>Stimulation of animal <br> growth and prevention of infectious diseases </h4></td></tr> 
         <tr><td class="feature-img"><image src="images/3.jpg" height="167px"></td><td class="right-clmn feature-img"><image src="images/2.jpg" width="250px"></td></tr> 
         <tr><td class="feature-button"><a href="/more-page.php?language=en&name=birds&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=animals&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr> 
         <!--End of one block--> 

         <!--One block--> 
         <tr><td class="feature-title"><h4>Greenhouses</h4></td><td class="right-clmn feature-title"><h4>Smell at a bar, restaurant, hotel etc.</h4></td></tr> 
         <tr><td class="feature-img"><image src="images/6.jpg" width="250px"></td><td class="right-clmn feature-img"><image src="images/4.jpg" width="250px"></td></tr> 
         <tr><td class="feature-button"><a href="/more-page.php?language=en&name=plants&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=smell-in-public-place&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr> 
         <!--End of one block--> 
         <!--One block--> 
         <tr><td class="feature-title"><h4>Beekeeping</h4></td><td class="right-clmn feature-title"><h4>A the gym</h4></td></tr> 
         <tr><td class="feature-img"><image src="images/8.jpg" width="250px"></td><td class="right-clmn feature-img"><image src="images/7.jpg" width="250px"></td></tr> 
         <tr><td class="feature-button"><a href="/more-page.php?language=en&name=bees&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=at-gym&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr> 
         <!--End of one block--> 


</table>

` CSS：

.TableOfReasons { 
    position: relative; 
    left: 0%; 
    right: 100%; 
} 
table { 
    background-color: transparent; 
} 
table { 
    border-spacing: 0; 
    border-collapse: collapse; 
} 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
}

來源

2017-05-31 Andrei Morozov

問題尋求幫助調試（「爲什麼不是這個代碼的工作？」）必須包括所期望的行爲，一個特定的問題或錯誤而**必要重現它最短的代碼**在問題本身。沒有明確問題陳述的問題對其他讀者無益。請參閱：如何創建最小，完整和可驗證示例。 [如何創建一個最小，完整和可驗證的示例]（https://stackoverflow.com/help/mcve）。 – caramba

@caramba我不知道如何把HTML放在這裏。 StackOverflow只是輸出它，但沒有代碼！ –

你可以編輯你的問題，在編輯器中有一個圖標來添加代碼。如果你沒有找到它，編輯器右邊還有一個問號'？'。使用它，它會顯示幫助。 – caramba

你可以把兩個不同的表中的數據（一個在左邊，一個在右邊的數據數據，否則完全一樣），並改變CSS的.TableOfReasons這樣：

.TableOfReasons { 
    position: relative; 
    left: 0%; 
    display: inline-block; 
}

那麼你需要添加HTML標籤<meta>在頭：

<meta name="viewport" content="width=device-width, initial-scale=1">

，然後使用這個CSS來他們都改變display: block;當畫面切換寬度;

@media screen and(max-width: 600px) { 
    .TableOfReasons { 
    display: block; 
    } 
}

CodePen

來源

2017-05-31 09:29:02

@AndreiMorozov怎麼樣？我的回答 –

不錯！有用！ –

@media (max-width: 600px) { 
    .TableOfReasons table tr{ 
     display:block; 
     width:100%; 
     padding:0px; 
     margin:0px; 
    } 

    .TableOfReasons table td{ 
     display:block; 
     width:100%; 
     padding:0px; 
     margin:0px; 
     clear:block; 
    } 
}

試試這個

來源

2017-05-31 08:47:38 ReGz

不幸的是，它並沒有幫助！ –

但我在服務器上留下了該代碼，您可以檢查！ –

你可以把表上的codepen – ReGz

重新部署移動版本的第一列表下面的第二列

回答

相關問題