Welcome! I recently created a simple gantt organizer as part of a demo. My goal was to make the main table scrollable while keeping certain columns "frozen" for easy visibility when navigating through the data. To achieve this, I followed some advice found at: how do I create an HTML table with fixed/frozen left column and scrollable body?
You can see an example of what I implemented here: https://jsfiddle.net/6pm6rztx/
<html>
<head>
<style>
#ChartArea
{
margin-left:340px;
overflow-x:auto;
overflow-y:visible;
padding:0;
}
#ganttable { border-collapse:collapse; border-spacing:0;border-top: 1px solid grey; }
#ganttable td, th {
margin:0;
border:1px solid grey;
white-space:nowrap;
border-top-width:0px;
}
#ganttable tr { height:20px }
/* The first 4 columns are "frozen", requiring different styling */
#ganttable td:first-child { position:absolute;left:0px; min-width:20px; max-width:20px;}
#ganttable td:nth-child(2) {position:absolute;left:20px;min-width:20px;max-width:20px;}
#ganttable td:nth-child(3) {position:absolute;left:40px;min-width:150;max-width:150px;text-overflow: ellipsis; overflow:hidden;}
#ganttable td:nth-child(4) {position:absolute;left:190px; min-width:150px;max-width:150px;text-overflow: ellipsis;overflow:hidden;}
.bgtd {background-color: red;}
</style>
</head&glt;
<body>
/* Table content is structured here */
<div id="ChartArea"><table id="ganttable">
<!-- Inserted row cells are displayed here -->
</table></div>
</body>
</html>
Upon inspection, I noticed that the first three cells have width issues - the borders extend beyond the specified width. This might be related to their positioning outside the actual table structure. How can I resolve this issue and ensure these cells have consistent widths with visible collapsed borders, similar to the rest of the table layout?