I have styled a table element to appear like a vertically aligned list, but I am looking for a way to automatically create a new table column when the existing one reaches a certain length or nears the bottom of the screen. Here is the code I have implemented 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>
... (additional rows)
<tr><td>Random String Blah</td></tr>
</table>
</body>
</html>
For a visual representation of the desired end result, please refer to this image: