The table will automatically create a new line when there are too many columns

Question

The table will automatically create a new line when there are too many columns

In our dynamic tables, columns are populated with different data for each table, and the number of columns is not predetermined.

If there are more than 4 columns, the table becomes too long. In this case, it should start a new line while maintaining the title of each row.

Refer to the image below for visual clarity:

https://i.sstatic.net/8J5D6.png

Please note: The table does not have a fixed width; its percentage-based width adjusts based on the device's screen size.

All columns share the same height and width that are responsive to the device's dimensions.

When the red block moves to a new line, all rows stack vertically to maintain continuity. Think of the three rows as one cohesive unit when wrapping to a new line.

html css html-table

Answer 1

Answer №1

There are still some bugs that need to be fixed Carefully

To address overflow, you can utilize JS/jQuery to dynamically create a new header element when necessary

Here is an example of how this can be implemented:

// Ensure the function runs on document ready
checktable();
$(window).on('resize', function() {
  checktable();
});


function checktable() {
  if ($(window).width() < $(document).width()) {
    if ($('tr.extended').length < 1) {
      $('tr').not('.extended').each(function(i, e) {
        $(document.createElement('tr'))
          .addClass('extended')
          .append($(e).html())
          .appendTo('#table');
        $(e).children('td').each(function(j, ele) {
          var eot = +$(ele).offset().left +
            +$(ele).width();
          if ($(window).width() < eot) {
            $(ele).hide();
            $('tr.extended').eq(i)
              .children('td').eq(j)
              .show();
          } else {
            $(ele).show();
            $('tr.extended').eq(i)
              .children('td').eq(j)
              .hide();
          }
        });
      });
    }
  } else {
    $('td').not('.extended').show();
    $('.extended').remove();
  }
}

td,
th {
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table" border=1>
  <tr>
    <th>
      head
    </th>
    <td>
      so long data 1
    </td>
    <td>
      so long data 2
    </td>
    <td>
      so long data 3
    </td>
    <td>
      so long data 4
    </td>
    <td>
      so long data 5
    </td>
    <td>
      so long data 6
    </td>
  </tr>
  <tr>
    <th>
      head2
    </th>
    <td>
      much long data 1
    </td>
    <td>
      much long data 2
    </td>
    <td>
      much long data 3
    </td>
    <td>
      much long data 4
    </td>
    <td>
      much long data 5
    </td>
  </tr>
</table>

Answer 2

There are still some bugs that need to be fixed Carefully

To address overflow, you can utilize JS/jQuery to dynamically create a new header element when necessary

Here is an example of how this can be implemented:

// Ensure the function runs on document ready
checktable();
$(window).on('resize', function() {
  checktable();
});


function checktable() {
  if ($(window).width() < $(document).width()) {
    if ($('tr.extended').length < 1) {
      $('tr').not('.extended').each(function(i, e) {
        $(document.createElement('tr'))
          .addClass('extended')
          .append($(e).html())
          .appendTo('#table');
        $(e).children('td').each(function(j, ele) {
          var eot = +$(ele).offset().left +
            +$(ele).width();
          if ($(window).width() < eot) {
            $(ele).hide();
            $('tr.extended').eq(i)
              .children('td').eq(j)
              .show();
          } else {
            $(ele).show();
            $('tr.extended').eq(i)
              .children('td').eq(j)
              .hide();
          }
        });
      });
    }
  } else {
    $('td').not('.extended').show();
    $('.extended').remove();
  }
}

td,
th {
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="table" border=1>
  <tr>
    <th>
      head
    </th>
    <td>
      so long data 1
    </td>
    <td>
      so long data 2
    </td>
    <td>
      so long data 3
    </td>
    <td>
      so long data 4
    </td>
    <td>
      so long data 5
    </td>
    <td>
      so long data 6
    </td>
  </tr>
  <tr>
    <th>
      head2
    </th>
    <td>
      much long data 1
    </td>
    <td>
      much long data 2
    </td>
    <td>
      much long data 3
    </td>
    <td>
      much long data 4
    </td>
    <td>
      much long data 5
    </td>
  </tr>
</table>

Answer 3

Answer №2

If you're looking to achieve the desired behavior, using display: inline-block; on the table cells is a straightforward option.

For further improvements in usability, I suggest checking out this article on responsive tables from CSS Tricks, especially tailored for better performance on smaller screens.

table {
  max-width: 100%; /* ensuring responsiveness */
}

td {
  display: inline-block;
}

<table border="1">
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>bbbbbbbbbbbbbbbbbbbbbbbbb</td>
    <td>ccccccccccccccccccccccccc</td>
    <td>ddddddddddddddddddddddddd</td>
    <td>eeeeeeeeeeeeeeeeeeeeeeeee</td>
  </tr>
</table>

Answer 4

If you're looking to achieve the desired behavior, using display: inline-block; on the table cells is a straightforward option.

For further improvements in usability, I suggest checking out this article on responsive tables from CSS Tricks, especially tailored for better performance on smaller screens.

table {
  max-width: 100%; /* ensuring responsiveness */
}

td {
  display: inline-block;
}

<table border="1">
  <tr>
    <td>aaaaaaaaaaaaaaaaaaaaaaaaa</td>
    <td>bbbbbbbbbbbbbbbbbbbbbbbbb</td>
    <td>ccccccccccccccccccccccccc</td>
    <td>ddddddddddddddddddddddddd</td>
    <td>eeeeeeeeeeeeeeeeeeeeeeeee</td>
  </tr>
</table>

The table will automatically create a new line when there are too many columns

Answer №1

Answer №2

Similar questions

Verify the presence of plain ASCII text

Bring in styles from the API within Angular

Creating a personalized notification box that is compatible with various screen sizes and web browsers on android devices with the help of

Tips for repairing a side bar and header with CSS when using a JS & jQuery scroller

The detailView feature in wenzhixin bootstrap-table is failing to initialize the child row

HTML5 input type Color displays individual RGB values

embedding an Image onto a webpage without requiring a source

What could be causing the incorrect display of updates when my Grails checkbox onclick remote function Ajax call is triggered

Performance Issues Arise with Rapid Clicking [jQuery]

Adjusting CSS to realign images on various screen types

Ensure that the images in the final row of the flexbox gallery are consistent in size with the rest

Exploring the challenges of applying styles to buttons using the :first-child and :last-child selectors, especially when

What is the best way to ensure all my borders are uniform in size?

I'm noticing my table collapsing as I move around the div elements - any idea why this is happening

Iterating over a map object using ngFor

Issues with jQuery Ajax sending Post data to PHP script

Unable to wrap the strings from the database in a span element

Jquery starts functioning properly after the second click and continues to work flawlessly

Styling your Kendo grid in ASP.NET MVC with custom CSS styling

The utilization of `ngSwitch` in Angular for managing and displaying