Advanced table/grid with variable number of columns & widths & overflows

Creating an advanced table/grid with a variable number of columns, dynamic widths, and handling overflows can be achieved using a combination of HTML, CSS, and possibly JavaScript. Below, I'll provide a step-by-step guide to create such a table/grid.

HTML Structure:

htmlCopy code
<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <!-- Table Header with variable column names -->
        <th>Column 1</th>
        <th>Column 2</th>
        <!-- Add more <th> elements as needed for additional columns -->
      </tr>
    </thead>
    <tbody>
      <!-- Table Rows with data -->
      <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
        <!-- Add more <td> elements as needed for additional columns -->
      </tr>
      <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
        <!-- Add more <td> elements as needed for additional columns -->
      </tr>
      <!-- Add more <tr> elements for additional rows -->
    </tbody>
  </table>
</div>

CSS Styling:

cssCopy code
/* CSS to style the table/grid */
.table-wrapper {
  overflow-x: auto; /* Enable horizontal scrolling for overflowed content */
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px 12px;
  border: 1px solid #ccc;
  white-space: nowrap; /* Prevent text wrapping */
  overflow: hidden; /* Hide overflowed content */
  text-overflow: ellipsis; /* Show "..." for overflowed content */
}

/* Adjust column widths dynamically based on the number of columns */
th {
  width: calc(100% / var(--num-columns)); /* Set equal width for each column */
}

/* Adjust column widths for specific columns */
th:nth-child(1),
td:nth-child(1) {
  width: 30%; /* Set custom width for the first column */
}

/* Add more nth-child rules for additional columns */

JavaScript (Optional):

If the number of columns is dynamic and determined by data, you can use JavaScript to set the --num-columns custom property in the CSS. This will help adjust the column widths automatically.

javascriptCopy code
// JavaScript to set the --num-columns custom property based on the actual number of columns
const table = document.querySelector('table');
const numColumns = table.querySelector('tr').childElementCount;
document.documentElement.style.setProperty('--num-columns', numColumns);

By combining the HTML, CSS, and JavaScript (if necessary) as shown above, you can create an advanced table/grid that adapts to the number of columns, has dynamic column widths, and handles overflows with ellipsis when the content doesn't fit in the cells. The table-wrapper will provide horizontal scrolling when the table content overflows the available width.