Question 190793 in Html Question posted in
Some basic documentation can be found here.

How to line tables horizontally in html css?

Basically, my code automatically generates a ton of tables (not a fixed number, depends on input), and the layout by default is just vertically down, one after another.

I would like to line the tables horizontally to fill up the page’s width before moving on to the next row of tables.
For illustration purposes, it currently looks something like this:
Current

I want it to look like this:
Want

I am a beginner creating a react app. Any help would be appreciated!

So far, the closest I’ve gotten is using "float: left" but the tables align in a weird slanted way, and all my buttons float all the way to the right.

Tags:

3

Answers


  1. 0

    You can use display: flex property of CSS to the parent tag of you table.

    for ex.

    <div style="display: flex; flex-wrap: wrap">
 <table>
  <tr>
     <td>Column 1</td>
     <td>Column 2</td>
  </tr>
  <tr>
     <td>Column 1</td>
     <td>Column 2</td>
  </tr>
 </table>
 <table>
  <tr>
     <td>Column 1</td>
     <td>Column 2</td>
  </tr>
  <tr>
     <td>Column 1</td>
     <td>Column 2</td>
  </tr>
 </table>
 /* List of table */
</div>
    Login or Signup to reply.
  2. 0 
    <html>
  <body>
  <h4 style="text-align:center;">
    /* List of table */
  </h4>
    <div style="display: flex; flex-wrap: wrap">
     <table border="1" cellspacing="0" style="margin-right:5px; margin-top:5px;">
      <tr>
         <td>Column 1</td>
         <td>Column 2</td>
      </tr>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
      </tr>
      <tr>
         <td>Cell 3</td>
         <td>Cell 4</td>
      </tr>
     </table>
     <table border="1" cellspacing="0" style="margin-right:5px; margin-top:5px;">
      <tr>
         <td>Column 1</td>
         <td>Column 2</td>
      </tr>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
      </tr>
      <tr>
         <td>Cell 3</td>
         <td>Cell 4</td>
      </tr>
     </table>
     <table border="1" cellspacing="0" style="margin-right:5px; margin-top:5px;">
      <tr>
         <td>Column 1</td>
         <td>Column 2</td>
      </tr>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
      </tr>
      <tr>
         <td>Cell 3</td>
         <td>Cell 4</td>
      </tr>
    </table>
    <table border="1" cellspacing="0" style="margin-right:5px; margin-top:5px;">
     <tr>
         <td>Column 1</td>
         <td>Column 2</td>
      </tr>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
      </tr>
      <tr>
         <td>Cell 3</td>
         <td>Cell 4</td>
      </tr>
     </table>
     <table border="1" cellspacing="0" style="margin-right:5px; margin-top:5px;">
     <tr>
         <td>Column 1</td>
         <td>Column 2</td>
      </tr>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
      </tr>
      <tr>
         <td>Cell 3</td>
         <td>Cell 4</td>
      </tr>
     </table>
     <table border="1" cellspacing="0" style="margin-right:5px; margin-top:5px;">
     <tr>
         <td>Column 1</td>
         <td>Column 2</td>
      </tr>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
      </tr>
      <tr>
         <td>Cell 3</td>
         <td>Cell 4</td>
      </tr>
     </table>
     <table border="1" cellspacing="0" style="margin-right:5px; margin-top:5px;">
     <tr>
         <td>Column 1</td>
         <td>Column 2</td>
      </tr>
      <tr>
         <td>Cell 1</td>
         <td>Cell 2</td>
      </tr>
      <tr>
         <td>Cell 3</td>
         <td>Cell 4</td>
      </tr>
     </table>
    </div>
  </body>
</html>

    I hope it will give you an understanding. Thanks

    Login or Signup to reply.
  3. 0

    Please find the code snippet below:

     <html>
      <title>Tables</title>
      <body>
      <h4 style="text-align:center;">
        /* List of table */
      </h4>
        <div style="display: flex; flex-wrap: wrap">
         <table border="1" border-style: dotted solid double dashed style="margin-right:5px; margin-top:5px;">
          <tr>
             <td>Column 1</td>
             <td>Column 2</td>
          </tr>
          <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
          </tr>
          <tr>
             <td>Cell 3</td>
             <td>Cell 4</td>
          </tr>
         </table>
           <table border="1" border-style: dotted solid double dashed style="margin-right:5px; margin-top:5px;">
          <tr>
             <td>Column 1</td>
             <td>Column 2</td>
          </tr>
          <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
          </tr>
          <tr>
             <td>Cell 3</td>
             <td>Cell 4</td>
          </tr>
         </table>   <table border="1" border-style: dotted solid double dashed style="margin-right:5px; margin-top:5px;">
          <tr>
             <td>Column 1</td>
             <td>Column 2</td>
          </tr>
          <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
          </tr>
          <tr>
             <td>Cell 3</td>
             <td>Cell 4</td>
          </tr>
         </table>   <table border="1" border-style: dotted solid double dashed style="margin-right:5px; margin-top:5px;">
          <tr>
             <td>Column 1</td>
             <td>Column 2</td>
          </tr>
          <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
          </tr>
          <tr>
             <td>Cell 3</td>
             <td>Cell 4</td>
          </tr>
         </table>   <table border="1" border-style: dotted solid double dashed style="margin-right:5px; margin-top:5px;">
          <tr>
             <td>Column 1</td>
             <td>Column 2</td>
          </tr>
          <tr>
             <td>Cell 1</td>
             <td>Cell 2</td>
          </tr>
          <tr>
             <td>Cell 3</td>
             <td>Cell 4</td>
          </tr>
         </table>
       
         
        </div>
      </body>
    </html>

    I hope this helps you

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search