Question 177618 in CSS Question posted in
Some basic documentation can be found here.

How do I limit the # of rows in a table HTML w/ CSS?

I want to display items names in a table but limit to number of rows is three. If there are more than 3 items then 4th item should be in 2nd column, if there are more than 6 items then 7th item should be in 3rd column.
I am using normal table.

<table>
    <tr *ngFor="let item of group">
        <td>{{item}}</td>
    </tr>
</table>

Please let me know what condition I have to give, to limit number of rows and get them in columns based on number of items.

TIA!!

Tags:

4

Answers


  1. 0

    You can use CSS Grid to arrange this sort of layout using grid-auto-flow. To get you started here’s a few resources:

    Your layout using grid can be seen below. I’ve annotated the pertinent bits:

    .table {
  display: grid;
  grid-auto-flow: column; /* make the items fill up the grid container by column and not row */
  grid-template-rows: repeat(3, 1fr); /* have a max number of 3 rows and make them all the same height */
  gap: 0.125rem; /*put a small gap between each element */
}

.table > div {
  background-color:teal;
  padding: 0.5rem 1rem;
}
    <div class="table">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>
    Login or Signup to reply.
  2. 0 
    <style>
  .table-container {
    max-height: 200px; /* Adjust the desired maximum height */
    overflow-y: auto; /* Enable vertical scrolling if necessary */
  }
</style>

<div class="table-container">
  <table>
    <!-- Your table content goes here -->
  </table>
</div>

    In this example, we wrap the table inside a div with the class table-container. The max-height property limits the height of the container, and if the content exceeds this height, it will enable vertical scrolling due to the overflow-y: auto property.

    Adjust the max-height value according to your requirements. If the table exceeds the specified height, the container will display a scrollbar to allow scrolling through the rows.

    Login or Signup to reply.
  3. 0

    Consider use Angular-Material…

    https://material.angular.io/components/table/api

    These and othe more features very helpful you can find

    Login or Signup to reply.
  4. 0

    @Adam has posted the correct answer for this using CSS methods.

    If you are looking to manually solve this through data manipulation, then this is a solution for you.

    export class UsersComponent {
  // Your data
  group: Array<string> = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
  // Fixed number of rows
  rows: number = 3;
  // Calculate number of columns based on data length and required number of rows
  columns: number = Math.ceil(this.group.length / this.rows);

  // We will push data here
  data: any = [];

  constructor() {
    // counter for data
    let elem = 0;
    // Outer loop
    for (let i = 0; i < this.rows; ++i) {
      // Create a row in data
      this.data.push([]);
      // Inner Loop
      for (let j = 0; j < this.columns; ++j) {
        // Do not push undefined elements (if any)
        if (this.group[elem]) {
          this.data[i][j] = this.group[elem];
        }
        // increment counter
        elem++;
      }
    }
    console.log(this.data);
  }
}

    Now that we have data in 2d format (with correct number of rows and columns), you can display it in your HTML like:

    <table>
    <tr *ngFor="let row of data">
        <span *ngFor="let column of row">
            <td>{{column}}</td>
        </span>
    </tr>
</table>

    It is possible to change ordering of elements appearing in a row (populate row first or populate columns first) just by tweaking outer and inner loops in code. Also you can change number of rows and size of your data to test it for various cases.

    Demo here https://stackblitz.com/edit/angular-mgte7k?file=src%2Fusers%2Fusers.component.ts

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search