RESPONSIVE TABLE
Hello i am making an e commerce website, i have made the website but having trouble with who to make my table responsive . I will also paste a photo . Please help me with this problem.
25 Replies
add a width of 100% to the elements you have a max-width
@azyrum not the solution 😢
share your code in a way that people can run it, preferably in codepen or a codesandbox. It'll be much easier for people to help
Ok
check out #How To Ask Good Questions, there's some info in there as well
table{
padding: 0;
margin: 0;
margin: 50px auto;
margin: 10px auto ;
font-family: monospace;
padding: 12px 0;
color: #555;
font-size: 29px;
box-shadow: 0 5px 10px 15px black;
text-align: center; max-width: 1300px; background: rgb(240, 128, 128); } thead{ font-family: 'Coiny', cursive; width: 30%; color: #fff ; text-transform: uppercase; font-size: 40px; padding: 90px; text-align: center; padding: 30px; font-size: 30px;
} th{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
} tr{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } td{ word-spacing: 5px; } @media screen and (max-width :1390px) { table{ max-width: 480px; height: 690px; } } I have try to minimise the size with width but no improvement in the size Tried *
text-align: center; max-width: 1300px; background: rgb(240, 128, 128); } thead{ font-family: 'Coiny', cursive; width: 30%; color: #fff ; text-transform: uppercase; font-size: 40px; padding: 90px; text-align: center; padding: 30px; font-size: 30px;
} th{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
} tr{ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; } td{ word-spacing: 5px; } @media screen and (max-width :1390px) { table{ max-width: 480px; height: 690px; } } I have try to minimise the size with width but no improvement in the size Tried *
please use a code block with syntax highlighting like described in the thread I linked, and you'll also have to include html, just CSS isn't super useful if people want to actually run your code
<table>
<thead>
<tr>
<th >Images</th>
<th >Name</th>
<th >features</th>
<th >quality</th>
<th >case</th>
</tr>
</thead>
<tbody>
<tr>
<td > <img class="earbud" src="54.jpg" alt=""></td>
<td class="rr"> JVC Compact True Wireless Earbuds </td>
<td class="rr"> LONG BATTERY LIFE,3 SOUND MODES </td>
<td class="rr"> Fine</td>
<td class="rr"> Fine</td>
</tr> <tr> <td > <img class="earbud" src="37.jpg" alt=""> </td> <td class="rr"> JLab Go Air True Wireless Bluetooth</td> <td class="rr"> LONG BATTERY LIFE,SMALLER DESIGN</td> <td class="rr"> Good</td> <td class="rr"> Great Design and fitting comfort </td>
</tr> <tr> <td> <img class="earbud" src="53.jpg" alt=""></td> <td class="rr"> ORIbox Wireless Earbuds</td> <td class="rr"> Easy Touch Control,Easy Touch Control</td> <td class="rr">Best</td> <td class="rr">Great Design and fitting comfort </td>
</tr> <tr> <td> <img class="earbud" id="fast" src="27.jpg" alt=""></td> <td class="rr"> Osdfono Wireless Earbuds Bluetooth 5.2 Headphones</td> <td class="rr"> IPX5 Sweatproof,Designed for Sports & Comfortable Fit</td> <td class="rr"> Good</td> <td class="rr"> Great Design and fitting comfort </td>
</tr> <tr> <td><img class="earbud" id="fast" src="31.jpg" alt=""></td> <td class="rr"> ekids Spiderman Wireless Bluetooth Headphones </td> <td class="rr"> Quality adjustable headband and padded ear cushions for maximum comfort, Foldable design ideal</td> <td class="rr"> Perfect</td> <td class="rr"> Prefect headset for Kids</td>
</tr> <tr> <td><img class="earbud" id="fast" src="46.jpg" alt=""></td> <td class="rr">Sam Gear USA Wireless Earbuds Bluetooth 5.0 Headphoness </td> <td class="rr"> Super-Strong Bluetooth,Ultra-large Battery Capacity,Lightweight and Comfortable Design</td> <td class="rr"> Perfect</td> <td class="rr"> Great Design and fitting comfort </td> </tr> <tr> <td><img class="earbud" id="fast" src="47.jpg" alt=""></td> <td class="rr">TOZO T10 Bluetooth 5.3 Wireless Earbuds </td> <td class="rr">Stereo Sound Quality,PX8 Waterproof, advanced Bluetooth 5.3 technology</td> <td class="rr"> Good</td> <td class="rr"> Great Case with Cool Charging port </td> </tr> <tr> <td><img class="earbud" id="fast" src="51.jpg" alt=""></td> <td class="rr">Skullcandy Dime True Wireless Bluetooth Earbuds </td> <td class="rr">Ultra comfortable design ,Rad Music Quality,Sweatproof and Waterproof </td> <td class="rr"> Good</td> <td class="rr"> Cool Design and fitting comfort </td> </tr> <tr> <td><img class="earbud" id="fast" src="52.jpg" alt=""></td> <td class="rr">Skullcandy Jib True 2 Wireless Bluetooth </td> <td class="rr">Supreme Sound ,33 hour battery time,Sweatproof and Waterproof </td> <td class="rr"> Good</td> <td class="rr"> Good </td> </tr> </tbody> <tfoot>
</tfoot> </thead> </table> I did use html it's just than the code was to long
</tr> <tr> <td > <img class="earbud" src="37.jpg" alt=""> </td> <td class="rr"> JLab Go Air True Wireless Bluetooth</td> <td class="rr"> LONG BATTERY LIFE,SMALLER DESIGN</td> <td class="rr"> Good</td> <td class="rr"> Great Design and fitting comfort </td>
</tr> <tr> <td> <img class="earbud" src="53.jpg" alt=""></td> <td class="rr"> ORIbox Wireless Earbuds</td> <td class="rr"> Easy Touch Control,Easy Touch Control</td> <td class="rr">Best</td> <td class="rr">Great Design and fitting comfort </td>
</tr> <tr> <td> <img class="earbud" id="fast" src="27.jpg" alt=""></td> <td class="rr"> Osdfono Wireless Earbuds Bluetooth 5.2 Headphones</td> <td class="rr"> IPX5 Sweatproof,Designed for Sports & Comfortable Fit</td> <td class="rr"> Good</td> <td class="rr"> Great Design and fitting comfort </td>
</tr> <tr> <td><img class="earbud" id="fast" src="31.jpg" alt=""></td> <td class="rr"> ekids Spiderman Wireless Bluetooth Headphones </td> <td class="rr"> Quality adjustable headband and padded ear cushions for maximum comfort, Foldable design ideal</td> <td class="rr"> Perfect</td> <td class="rr"> Prefect headset for Kids</td>
</tr> <tr> <td><img class="earbud" id="fast" src="46.jpg" alt=""></td> <td class="rr">Sam Gear USA Wireless Earbuds Bluetooth 5.0 Headphoness </td> <td class="rr"> Super-Strong Bluetooth,Ultra-large Battery Capacity,Lightweight and Comfortable Design</td> <td class="rr"> Perfect</td> <td class="rr"> Great Design and fitting comfort </td> </tr> <tr> <td><img class="earbud" id="fast" src="47.jpg" alt=""></td> <td class="rr">TOZO T10 Bluetooth 5.3 Wireless Earbuds </td> <td class="rr">Stereo Sound Quality,PX8 Waterproof, advanced Bluetooth 5.3 technology</td> <td class="rr"> Good</td> <td class="rr"> Great Case with Cool Charging port </td> </tr> <tr> <td><img class="earbud" id="fast" src="51.jpg" alt=""></td> <td class="rr">Skullcandy Dime True Wireless Bluetooth Earbuds </td> <td class="rr">Ultra comfortable design ,Rad Music Quality,Sweatproof and Waterproof </td> <td class="rr"> Good</td> <td class="rr"> Cool Design and fitting comfort </td> </tr> <tr> <td><img class="earbud" id="fast" src="52.jpg" alt=""></td> <td class="rr">Skullcandy Jib True 2 Wireless Bluetooth </td> <td class="rr">Supreme Sound ,33 hour battery time,Sweatproof and Waterproof </td> <td class="rr"> Good</td> <td class="rr"> Good </td> </tr> </tbody> <tfoot>
</tfoot> </thead> </table> I did use html it's just than the code was to long
that's why something like codepen is so useful as well, it's free to sign up
you set the preprocessor to stylus
you have to set it to none, you've just got vanilla css
How to be better at css . I have 6 month of experience but still i am at a medium level
"vanilla" in this context just means "doesn't use a preprocessor", not that it's bad or whatever. How to get better? Watch tutorials, build projects, repeat.
anyway, regarding your code, what's wrong with it exactly? It shifts width at 1390px viewport width, what else do you want it to do?
To be responsive and to be shown at every mobile , tablet and many more
responsive isn't a magic word. If you take your
max-width's off though, it'll shrink and grow width with the viewportyou will also need to reduce your font size - it is very large at the moment, which may be what you want on large screens, but it is preventing the table from reducing in width on smaller screens
you should also be setting your font-size in
rem not pxI don't understand when do it in 1060 it ruining my website and disturbing my nav bar and showing white background
But the white background is still showing
right, but that's not part of your codepen. I'm really not sure what you expect it to do. "Responsive" effectively just means "it works on many screens", so it's not really enough for someone to solve the problem you're having without a lot of extra description and maybe also the context of the rest of your website.
the table, without max-width set, is responsive. If it then doesn't fit with the rest of your site, we'll need to see the rest of your site to be able to help with that
https://codepen.io/Hamza-Nawaz-the-solid/pen/VwVmbJe
This might help you
@jochemm
Anyone
you have a lot of media queries, why are you only setting the width on the table in one?
I think what's happening is what Chris said, your table can't get narrower because the font size is too big. It won't shrink past a certain size simply because then the text would flow out of the table
reduce the font size, and it should shrink further.