Search code examples
htmlcssflexbox

Flexbox: Move one table below another

Below is a page I'm currently working own.

It works almost as I want, but there is one minor issue. If the web page is not wide enough to fit both pages (note the 3rd column in each table is 10 em width), the second page should be moved below the first, instead of shrinking (shrinking is how it works currently). How to do it?

div#pages {
    display: flex;
    gap: 1em;
}
div.page {
    border-color: gray;
    border-width: 1px;
    display: flex;
    padding: 1em; display: flex; gap: 1em;
}
div.page, td {
    border-style: solid;
}
table {
    border-collapse: collapse;
}
td  {
    border-color: silver;
    border-width: 1px;
    font-size: initial;
}
tr td:nth-of-type(1), tr td:nth-of-type(2) {
    width: auto;
}
tr td:nth-of-type(3) {
    width: 10em;
}

<div id="pages">
    <div class="page">
        <table>
            <tr><td>A</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>

            <tr><td>B</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>C</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>D</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>E</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
        </table>

        <table>
            <tr><td>F</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>G</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>H</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>I</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>L</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
        </table>
    </div>

    <div class="page">
        <table>
            <tr><td>M</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>

            <tr><td>N</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>O</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>P</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>R</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
        </table>

        <table>
            <tr><td>S</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>T</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>U</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>X</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td></td> <td>u</td><td></td></tr>
            
            <tr><td>Z</td><td>a</td><td></td></tr>
            <tr><td></td> <td>e</td><td></td></tr>
            <tr><td></td> <td>i</td><td></td></tr>
            <tr><td></td> <td>o</td><td></td></tr>
            <tr><td>Q</td><td>u</td><td></td></tr>
        </table>
    </div>
</div>

<pre>
      K -> C
J and Y -> I
V and W -> U
     Qu -> Zu
</pre>
Solution

  • There are 4 tables and 2 pages and 1 container. What's important is to know that each flex refers to its immediate children.

    Also, adding flex-wrap: wrap; helps to break the flexed list which is by default wrap.

    div#pages {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
}

div.page {
  border-color: gray;
  border-width: 1px;
  display: flex;
  padding: 1em;
  display: flex;
  gap: 1em;
}

div.page,
td {
  border-style: solid;
}

table {
  border-collapse: collapse;
}

td {
  border-color: silver;
  border-width: 1px;
  font-size: initial;
}

tr td:nth-of-type(1),
tr td:nth-of-type(2) {
  width: auto;
}

tr td:nth-of-type(3) {
  width: 10em;
}
    <div id="pages">
  <div class="page">
    <table>
      <tr>
        <td>A</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>B</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>C</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>D</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>E</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>
    </table>

    <table>
      <tr>
        <td>F</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>G</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>H</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>I</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>L</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>
    </table>
  </div>

  <div class="page">
    <table>
      <tr>
        <td>M</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>N</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>O</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>P</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>R</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>
    </table>

    <table>
      <tr>
        <td>S</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>T</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>U</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>X</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>u</td>
        <td></td>
      </tr>

      <tr>
        <td>Z</td>
        <td>a</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>e</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>i</td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>o</td>
        <td></td>
      </tr>
      <tr>
        <td>Q</td>
        <td>u</td>
        <td></td>
      </tr>
    </table>
  </div>
</div>

<pre>
      K -> C
J and Y -> I
V and W -> U
     Qu -> Zu
</pre>