Create a new vertical table column if the table height reaches a certain length or reaches bottom of-CodePudding

I have currently styled a table element so that it appears like a vertically aligned list, but I want it so that if the vertical table column reaches a certain length, or goes near the bottom of the screen, it will automatically create a new table column. Here's my code so far:

<!DOCTYPE html>
<html>
<head>
<style>
table {
  border-collapse: collapse;
  width: max-content;
}

td {
  height: max-content;
  vertical-align: center;
  text-align:center
}
</style>
</head>
<body>

<h2>Test</h2>

<p>This is just a test.</p>

<table>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
    <tr><td>Random String Blah</td></tr>
</table>

</body>
</html>

Here's what it would ideally look like: https://imgur.com/gallery/XLWg9Dbfds

CodePudding user response：

Try using flex properties

table {
  border-collapse: collapse;
  width: max-content;
}

table tbody {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 80vh;
}

td {
  height: max-content;
  vertical-align: center;
  text-align:center
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>    
    <h2>Test</h2>    
    <p>This is just a test.</p>    
    <table>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
      <tr><td>Random String Blah</td></tr>
    </table>    
  </body>
</html>