Hoe maak je een Tabel responsive?

Door Onbekende gebruiker op 14-02-2016 13:21
3.941 views
Hallo iedereen,

Ik zit met een probleempje en hoop dat jullie me hiermee kunnen hebben.
Zoals u kunt zien op abcwinkel.nl staan onderaan de homepagina netjes 3 filmpjes naast elkaar met de prijs eronder en stop in winkelwagen knop etc..
Deze heb ik met een <table><td> gemaakt.
Als je nu op mobiel kijkt, staan ze nog steeds naast elkaar.
Hoe zorg ik dat ze op mobiel onder elkaar worden weergeven?

Dit is de tabel die ik tot nu toe heb:

<table>
<tbody>
<tr>
<td><iframe src="https://www.youtube.com/embed/tF6JZSTw9DY" height="172" width="274"></iframe>
<h2 class="product-name" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-size: 14px; font-weight: normal; color: #636363; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-style: normal; line-height: 1.4; text-rendering: optimizeLegibility; text-transform: uppercase; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><a style="box-sizing: border-box; margin: 0px; padding: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; outline: #3091c2 0px; font-weight: 500;" title="Bergner Roestvrijstalen asperge-/ pastapan met deksel (4,2 l.)" href="http://www.abcwinkel.nl/bergner-roestvrijstalen-asperge-pastapan-met-deksel-4-2-l.html"> ROESTVRIJSTALEN ASPERGE/ PASTAPAN MET DEKSEL (4,2 L.)</a></h2>
<div class="price-box" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #a0a0a0; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span id="product-price-3295" class="regular-price" style="box-sizing: border-box; margin: 0px; padding: 0px;"> <span class="price" style="box-sizing: border-box; margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #3399cc; font-size: 16px;"> &euro;&nbsp;29,95</span></span></div>
<p><button class="button btn-cart" style="box-sizing: border-box; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-size: 13px; line-height: 19px; -webkit-appearance: button; cursor: pointer; touch-action: manipulation; color: #ffffff; display: inline-block; font-weight: normal; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: normal; border: 0px none; margin: 0px; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; background: #3399cc;" title="In winkelwagen" onclick="setLocation('http://www.abcwinkel.nl/checkout/cart/add/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9cGFzdGFwYW4,/product/3295/form_key/dtn2GQoibtptrxjQ/')" type="button"> <span style="box-sizing: border-box; margin: 0px; padding: 0px;">IN WINKELWAGEN</span></button></p>
<ul class="add-to-links" style="box-sizing: border-box; margin: 7px 0px 0px; padding: 0px; list-style: none;">
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-wishlist" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/wishlist/index/add/product/3295/form_key/dtn2GQoibtptrxjQ/"> Zet op verlanglijst</a></p>
</li>
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-compare" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/catalog/product_compare/add/product/3295/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9cGFzdGFwYW4,/form_key/dtn2GQoibtptrxjQ/"> Voeg toe aan productvergelijking</a></p>
</li>
</ul>
<p>&nbsp;</p>
</td>
<td><iframe src="https://www.youtube.com/embed/VwkD7zsAIV8" height="172" width="273"></iframe>
<h2 class="product-name" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-size: 14px; font-weight: normal; color: #636363; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-style: normal; line-height: 1.4; text-rendering: optimizeLegibility; text-transform: uppercase; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><a style="box-sizing: border-box; margin: 0px; padding: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; font-weight: 500;" title="Renberg Roestvrijstalen theepot met filter (1,1 liter)" href="http://www.abcwinkel.nl/renberg-roestvrijstalen-theepot-met-filter-1-1-liter.html"> RENBERG ROESTVRIJSTALEN THEEPOT MET FILTER (1,1 LITER)</a></h2>
<div class="price-box" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #a0a0a0; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span id="product-price-3325" class="regular-price" style="box-sizing: border-box; margin: 0px; padding: 0px;"> <span class="price" style="box-sizing: border-box; margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #3399cc; font-size: 16px;"> &euro;&nbsp;9,95</span></span></div>
<p><button class="button btn-cart" style="box-sizing: border-box; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-size: 13px; line-height: 19px; -webkit-appearance: button; cursor: pointer; touch-action: manipulation; color: #ffffff; display: inline-block; font-weight: normal; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: normal; border: 0px none; margin: 0px; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; background: #3399cc;" title="In winkelwagen" onclick="setLocation('http://www.abcwinkel.nl/checkout/cart/add/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9dGhlZXBvdA,,/product/3325/form_key/dtn2GQoibtptrxjQ/')" type="button"> <span style="box-sizing: border-box; margin: 0px; padding: 0px;">IN WINKELWAGEN</span></button></p>
<ul class="add-to-links" style="box-sizing: border-box; margin: 7px 0px 0px; padding: 0px; list-style: none;">
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-wishlist" style="box-sizing: border-box; margin: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; outline: #3091c2 0px; display: inline-block; padding-left: 3px; padding-right: 3px; padding-top: 0px; padding-bottom: 3px;" href="http://www.abcwinkel.nl/wishlist/index/add/product/3325/form_key/dtn2GQoibtptrxjQ/"> Zet op verlanglijst</a></p>
</li>
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-compare" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/catalog/product_compare/add/product/3325/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9dGhlZXBvdA,,/form_key/dtn2GQoibtptrxjQ/"> Voeg toe aan productvergelijking</a></p>
</li>
</ul>
<p>&nbsp;</p>
</td>
<td><iframe src="https://www.youtube.com/embed/dtqb2I3qeaI" height="172" width="280"></iframe>
<h2 class="product-name" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-size: 14px; font-weight: normal; color: #3399cc; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-style: normal; line-height: 1.4; text-rendering: optimizeLegibility; text-transform: uppercase; font-variant: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><a style="box-sizing: border-box; margin: 0px; padding: 0px; touch-action: manipulation; color: #3399cc; text-decoration: none; font-weight: 500;" title="D&eacute;luxa Luxe sieradenbox met spiegel (30,5x19,5x20)" href="http://www.abcwinkel.nl/deluxa-luxe-sieradenbox-met-spiegel-30-5x19-5x20.html"> D&Eacute;LUXA LUXE SIERADENBOX MET SPIEGEL (30,5X19,5X20)</a></h2>
<div class="price-box" style="box-sizing: border-box; margin: 0px 0px 5px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #a0a0a0; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: auto; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span id="product-price-3176" class="regular-price" style="box-sizing: border-box; margin: 0px; padding: 0px;"> <span class="price" style="box-sizing: border-box; margin: 0px; padding: 0px; font-family: 'Helvetica Neue', Verdana, Arial, sans-serif; color: #3399cc; font-size: 16px;"> &euro;&nbsp;32,95</span></span></div>
<p><button class="button btn-cart" style="box-sizing: border-box; font-family: Raleway, 'Helvetica Neue', Verdana, Arial, sans-serif; font-size: 13px; line-height: 19px; -webkit-appearance: button; cursor: pointer; touch-action: manipulation; color: #ffffff; display: inline-block; font-weight: normal; text-align: center; text-transform: uppercase; vertical-align: middle; white-space: normal; border: 0px none; margin: 0px; padding-left: 15px; padding-right: 15px; padding-top: 7px; padding-bottom: 7px; background: #3399cc;" title="In winkelwagen" onclick="setLocation('http://www.abcwinkel.nl/checkout/cart/add/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9c2llcmFkZW4,/product/3176/form_key/dtn2GQoibtptrxjQ/')" type="button"> <span style="box-sizing: border-box; margin: 0px; padding: 0px;">IN WINKELWAGEN</span></button></p>
<ul class="add-to-links" style="box-sizing: border-box; margin: 7px 0px 0px; padding: 0px; list-style: none;">
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-wishlist" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/wishlist/index/add/product/3176/form_key/dtn2GQoibtptrxjQ/"> Zet op verlanglijst</a></p>
</li>
<li style="box-sizing: border-box; margin: 0px; padding: 0px;">
<p><a class="link-compare" style="box-sizing: border-box; margin: 0px; padding: 0px 3px 3px; touch-action: manipulation; color: #3399cc; text-decoration: none; display: inline-block;" href="http://www.abcwinkel.nl/catalog/product_compare/add/product/3176/uenc/aHR0cDovL3d3dy5hYmN3aW5rZWwubmwvY2F0YWxvZ3NlYXJjaC9yZXN1bHQvP3E9c2llcmFkZW4,/form_key/dtn2GQoibtptrxjQ/"> Voeg toe aan productvergelijking</a></p>
</li>
</ul>
<p>&nbsp;</p>
</td>
</tr>
</tbody>
</table>
Sorry voor de rommelige code.