Search code examples
htmlcssreactjscss-tables

How to get tables to grow infinitely off screen side by side instead of top and bottom with html and css

I am mapping through user object and want tables to display side by side using overflowX: "scroll"

The Problem:

When I am mapping through the tables I am only able to get them to display one on top of the other and not side by side (Please note) I want the tables to display off screen. Meaning the second table should display to the right off the screen.

Code Sandbox link

  <div
        style={{ display: "block", overflowX: "scroll", overflowY: "visible" }}
      >
  {wrestlersGrades.length
          ? wrestlersGrades.map((wrestler) => {
              return (
                <table>
                  <thead>
                    <tr>
                      <WrestlerTableHeader wrestler={wrestler} />
                    </tr>
                  </thead>
                  <tbody className="">
                    {/*<WrestlerTableBody wrestler={wrestler} />*/}
                    <tr>
                      <td>Alfreds Futterkiste</td>
                      <td>Maria Anders</td>
                      <td>Germany</td>
                      <td>Alfreds Futterkiste</td>
                      <td>Maria Anders</td>
                      <td>Germany</td>
                      <td>Alfreds Futterkiste</td>
                      <td>Maria Anders</td>
                      <td>Germany</td>
                    </tr>
                    <tr>
                      <td>Centro comercial Moctezuma</td>
                      <td>Francisco Chang</td>
                      <td>Mexico</td>
                      <td>Centro comercial Moctezuma</td>
                      <td>Francisco Chang</td>
                      <td>Mexico</td>
                      <td>Centro comercial Moctezuma</td>
                      <td>Francisco Chang</td>
                      <td>Mexico</td>
                    </tr>
                    <tr>
                      <td>This is America</td>
                      <td>Hello </td>
                      <td>United States of America</td>
                      <td>This is America</td>
                      <td>Hello </td>
                      <td>United States of America</td>
                      <td>This is America</td>
                      <td>Hello </td>
                      <td>United States of America</td>
                    </tr>
                  </tbody>
                </table>
              );
            })
          : null}
</div>
Solution

  • The easiest solution with flex: Code sandbox