truckerwes24 Posted May 18 Share Posted May 18 So I am trying to make a custom table layout with the product description. I have the slider one and I wanted to make a table with 2 rows and 4 columns, so 8 items. I wanted each item to have a heading, a subheading, and then like a progress bar. I made it and it looks good on just a plain html document. I made it into one file so I don't have to link a stylesheet or anything but it glitches and makes it all weird. Attached here is a screenshot. This is my first time trying to make a custom description with html as I usually just do plain text. That is supposed to be the last item. Item 1 | Item 2 | Item 3 | Item 4 Item 5 | Item 6 | Item 7 | Item 8 is how it is supposed to look. Can anyone help me out? Here is the code I used. Thanks in advance! <!--<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Feature Table</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="table-container"> <table class="feature-table"> <tbody> <tr> <td> <h3>1GB</h3> <p>RAM</p> <div class="progress-bar"> <div class="progress" style="width: 70%;"></div> </div> </td> <td> <h3>Unlimited</h3> <p>Slots</p> <div class="progress-bar"> <div class="progress" style="width: 90%;"></div> </div> </td> <td> <h3>90</h3> <p>Recommended Slots</p> <div class="progress-bar"> <div class="progress" style="width: 50%;"></div> </div> </td> <td> <h3>Multicraft</h3> <p>Control Panel</p> <div class="progress-bar"> <div class="progress" style="width: 85%;"></div> </div> </td> </tr> <tr> <td> <h3>NVMe SSD</h3> <p>Drive</p> <div class="progress-bar"> <div class="progress" style="width: 95%;"></div> </div> </td> <td> <h3>Guaranteed</h3> <p>DDOS Protection</p> <div class="progress-bar"> <div class="progress" style="width: 100%;"></div> </div> </td> <td> <h3>Unlimited</h3> <p>Disk Space</p> <div class="progress-bar"> <div class="progress" style="width: 75%;"></div> </div> </td> <td> <h3>Unlimited</h3> <p>Bandwidth</p> <div class="progress-bar"> <div class="progress" style="width: 80%;"></div> </div> </td> </tr> </tbody> </table> </div> </body> </html> --> <div style="max-width: 800px; margin: auto; display: flex; flex-wrap: wrap;"> <div style="width: 50%; padding: 10px; box-sizing: border-box;"> <h3 style="margin: 0; font-weight: bold;">Sample Heading 1</h3> <p style="margin: 0; font-size: 0.9em;">Subheading 1</p> <div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;"> <div style="width: 70%; background-color: #4caf50; height: 100%;"></div> </div> </div> <div style="width: 50%; padding: 10px; box-sizing: border-box;"> <h3 style="margin: 0; font-weight: bold;">Sample Heading 2</h3> <p style="margin: 0; font-size: 0.9em;">Subheading 2</p> <div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;"> <div style="width: 90%; background-color: #4caf50; height: 100%;"></div> </div> </div> <div style="width: 50%; padding: 10px; box-sizing: border-box;"> <h3 style="margin: 0; font-weight: bold;">Sample Heading 3</h3> <p style="margin: 0; font-size: 0.9em;">Subheading 3</p> <div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;"> <div style="width: 50%; background-color: #4caf50; height: 100%;"></div> </div> </div> <div style="width: 50%; padding: 10px; box-sizing: border-box;"> <h3 style="margin: 0; font-weight: bold;">Sample Heading 4</h3> <p style="margin: 0; font-size: 0.9em;">Subheading 4</p> <div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;"> <div style="width: 85%; background-color: #4caf50; height: 100%;"></div> </div> </div> <div style="width: 50%; padding: 10px; box-sizing: border-box;"> <h3 style="margin: 0; font-weight: bold;">Sample Heading 5</h3> <p style="margin: 0; font-size: 0.9em;">Subheading 5</p> <div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;"> <div style="width: 95%; background-color: #4caf50; height: 100%;"></div> </div> </div> <div style="width: 50%; padding: 10px; box-sizing: border-box;"> <h3 style="margin: 0; font-weight: bold;">Sample Heading 6</h3> <p style="margin: 0; font-size: 0.9em;">Subheading 6</p> <div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;"> <div style="width: 100%; background-color: #4caf50; height: 100%;"></div> </div> </div> <div style="width: 50%; padding: 10px; box-sizing: border-box;"> <h3 style="margin: 0; font-weight: bold;">Sample Heading 7</h3> <p style="margin: 0; font-size: 0.9em;">Subheading 7</p> <div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;"> <div style="width: 75%; background-color: #4caf50; height: 100%;"></div> </div> </div> <div style="width: 50%; padding: 10px; box-sizing: border-box;"> <h3 style="margin: 0; font-weight: bold;">Sample Heading 8</h3> <p style="margin: 0; font-size: 0.9em;">Subheading 8</p> <div style="background-color: #f3f3f3; height: 20px; width: 100%; margin-top: 5px; border-radius: 5px; overflow: hidden;"> <div style="width: 80%; background-color: #4caf50; height: 100%;"></div> </div> </div> </div> 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.