Hoe maak je een Tabel responsive?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

14/02/2016 13:21:58
Quote Anchor link
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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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.
 
PHP hulp

PHP hulp

26/05/2026 14:47:37
 
Soccertime website

soccertime website

14/02/2016 14:25:38
Quote Anchor link
ik zou de video's in div'jes doen en dan een float gebruiken in de browserpagina, als je gebruik maakt van media queries in je css file kun je bij het responsive gedeelte de float op none zetten het zou dan moeten werken denk ik.
 

14/02/2016 16:21:42
Quote Anchor link
Dat is het probleem. het is een magento cms pagina, en kan zover ik weet alleen bij html code van pagina komen.
Aan de rest van css durf ik niet aan te zitten.
 
Randy vsf

Randy vsf

14/02/2016 17:07:00
Quote Anchor link
<table style="Width: 100%"> al eens geprobeerd? Als procenten iet werkt kan je nog met vw proberen.

Edit:
Ik zie nu dat je de 3 filmpjes onder elkaar wilt hebben voor mobiel.
Als je niet in de magento css files wilt werken kan je altijd zelf nog een css file toevoegen met je eigen classes, en die aan de tabel toekennen.
Gewijzigd op 14/02/2016 17:13:33 door Randy vsf
 

14/02/2016 18:46:02
Quote Anchor link
Dat werkte niet.

Met welke code kan ik hem dan alsnog responsive maken?
 
Marthijn Buijs

Marthijn Buijs

14/02/2016 18:51:36
Quote Anchor link
Kijk eens op jqueryrain.com, daar staat vast wel een plugin hiervoor.
 
Peter Griffin

Peter Griffin

19/02/2016 00:42:57
Quote Anchor link
Waarom gebruik je niet gewoon bootstrap?
 
Randy vsf

Randy vsf

19/02/2016 09:51:27
Quote Anchor link
ALs je echt niet in de CSS wilt werken (al snap ik niet waarom), kan je ook wat javascript in je HTML files zetten.
Met screen.width en screen.height krijg je de huidige resolutie van het scherm. Van daaruit kan je bepalen wat je doet.

Maar wat is de reden dat je niet wat classes in de CSS file erbij zet?
Gewijzigd op 19/02/2016 09:52:56 door Randy vsf
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.