Currently, I am in the process of creating a <table> along with its container (<div>). The concept is to have the table expand freely based on its content while the container acts as a fixed "window" for the table. The container will have preset max-width and max-height values so that scroll bars appear when necessary (bonus if I can set max-width for column headers (<th>)).
Approach to the Problem:
My current approach involves loading the table, allowing it to stretch to accommodate its content, then using jQuery to determine the widths of the table and its columns. I attempted setting the <div> to display: fixed; to retrieve these widths but found that the table stops stretching once it reaches the window width. Ideally, I need the table to exceed the window width for this method to work properly. Despite this limitation, the approach itself seems viable. Please note that there are additional parent <div> elements, though I'm simplifying by focusing on what's most relevant to the issue at hand. Below is a snippet of the code:
HTML
<div class="divResultTable" style="display:none">
<span class="spanResultTableHeader"></span>
<br />
<div class="divOuterTableContainer"> <- this is the mentioned container
<table> <- this is the mentioned table
<thead><tr></tr></thead>
<tbody></tbody>
</table>
</div>
</div>
CSS
.divResultTable {
overflow: hidden;
text-align: center;
width: 100%;
margin: 20px 0 0 0;
}
.divResultTable span {
font-size: 18px;
display: contents;
}
.divResultTable .divOuterTableContainer {
width: 100%;
max-height: 300px;
overflow: auto;
display: inline-block;
}
.divResultTable .divOuterTableContainer table {
position: relative;
border-collapse: collapse;
table-layout: fixed;
top: 0;
}
.divResultTable .divOuterTableContainer table tr {
border-collapse: collapse;
}
.divResultTable .divOuterTableContainer table thead tr th {
border-collapse: collapse;
padding: 0px 5px;
position: sticky;
top: -1px;
background-color: #B0B0B0;
}
.divResultTable .divOuterTableContainer table tbody tr td {
border: 1px solid black;
border-collapse: collapse;
padding: 0px 5px;
font-size: 12px;
text-align: left;
}
.divResultTable .divOuterTableContainer table tbody tr:nth-child(2n+2) {
background-color: #E0E0E0;
}
jQuery in typescript file
// This script runs in a .success function
$("#queryTabBody .divResultTable table").last().css("position", "fixed");
let tableWidth = $("#queryTabBody .divResultTable table").last().width();
var widths: number[] = new Array();
$("#queryTabBody .divResultTable table").last().find("th").each(function (index: number, element: Element) { widths[index] = $(element).width(); });
$("#queryTabBody .divResultTable table").last().find("th").each(function (index: number, element: Element) { $(element).width(widths[index]); });
$("#queryTabBody .divResultTable table").last().width(tableWidth);
$("#queryTabBody .divResultTable table").last().css("position", "");
Please Note: I do not have prior knowledge of the number of rows or columns the table will contain, neither do I receive custom column widths from the server. It is acceptable if jQuery takes some time to execute as I have a loading overlay in place until everything is fully loaded and visually appealing. My goal is to address this challenge solely through CSS and jQuery without external libraries due to job restrictions.
Questions:
- Are there alternative solutions you recommend?
- How can I achieve my initial concept explained in the introduction section?
How can I configure my HTML and CSS to allow the table to overflow beyond the window?
How can I implement the idea described at the beginning?