I appreciate all the advice, but my issue lies within using angular. The problem arises when I have a large number of rows, and there isn't enough vertical space to display them properly.
How does Angular relate to this particular issue?
[..] when I have numerous rows, the vertical layout becomes crowded. What I would prefer is for the content to overflow horizontally instead.
Tables are not equipped to provide the flexibility you require, especially in terms of controlling the height and flow of rows as columns.
[..] Is there a way to allow the content to spill over if it extends beyond the table? In scenarios where I only have 2 or 3 entries, I don't want to initially set the width to be double the normal size. I would rather adjust the table size based on the number of entries present.
One simple solution could involve dividing your rows into separate tables. Once you establish this structure, implementing CSS columns becomes straightforward.
To achieve this, enclose all these tables within a div with defined height restrictions. Apply column-* properties to the wrapping div for desired results. Experiment with column-gap, column-rule, column-span, and column-fill properties for aesthetic enhancement.
Furthermore, ensure to include break-inside: avoid on the tables to prevent them from splitting midway while transitioning to the next column.
Example Illustration:
#rowflow {
height: 120px; max-height: 120px;
border: 1px solid #d33; overflow: hidden;
column-width: 200px; column-gap-width: 0px; column-fill: auto;
column-rule: 1px solid #bbb;
}
table {
font-family: sans-serif; margin-bottom: 2px;
table-layout: fixed; width: 190px;
}
table:first-child { column-span: all; }
table, th, td { border-collapse: collapse; border: 0px solid gray; padding: 6px; }
table, tr { break-inside: avoid; }
th, td { text-align: left; }
th:last-child, td:last-child { text-align: right; }
<div id="rowflow">
<table><tr><th>Name</th><th>Sport</th><th>Score</th></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
<table><tr><td>Jordan</td><td>Soccer</td><td>50</td></tr></table>
</div>
In the provided illustration, the enclosing div restricts height, allowing columns to flow smoothly.
Explore this fiddle to observe the impact when adjusting window size.
[..] My aim is to avoid setting a doubled initial width but instead size the table according to the actual content without scrollbars appearing.
The wrapping div will naturally expand to full width. However, you can manipulate the overflow property to manage excess content display. Adapting the width dynamically based on content width involves JavaScript implementation, which can become complex.
Note: To implement the above approach successfully, fix the widths of tables for precise column alignment. Employ table-layout: fixed for a consistent layout.