0

Hi I am writing a simple gantt organizer as a demo. I wanted the main table be scrollable with several columns from it "frozen" so they would always be at sight when maneuvering around the table. I used the advice from: how do I create an HTML table with fixed/frozen left column and scrollable body? What it means the table is given a margin and the cells from "frozen" columns are positioned outside the rest of the table inside this margin.

Example of what I did: 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}

/*make the first 4 cols "frozen", should I make different td,th stuff for these ones for borders etc */
#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>
<body>

<div id="ChartArea"><table id="ganttable"><tr><td>X</td><td>[]</td><td>Task</td><td>Responsible</td><td>2017-03-05</td><td>2017-03-06</td><td>2017-03-07</td><td>2017-03-08</td><td>2017-03-09</td><td>2017-03-10</td><td>2017-03-11</td><td>2017-03-12</td><td>2017-03-13</td><td>2017-03-14</td><td>2017-03-15</td><td>2017-03-16</td><td>2017-03-17</td><td>2017-03-18</td><td>2017-03-19</td><td>2017-03-20</td><td>2017-03-21</td><td>2017-03-22</td><td>2017-03-23</td><td>2017-03-24</td><td>2017-03-25</td><td>2017-03-26</td><td>2017-03-27</td><td>2017-03-28</td><td>2017-03-29</td><td>2017-03-30</td><td>2017-03-31</td><td>2017-04-01</td><td>2017-04-02</td><td>2017-04-03</td><td>2017-04-04</td><td>2017-04-05</td><td>2017-04-06</td><td>2017-04-07</td><td>2017-04-08</td></tr><tr><td><button class="delcell" onclick="remTask(this);">X</button></td><td><button class="modcell" onclick="openModForm(this);">[]</button></td><td>Taskg</td><td>Personas</td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td><button class="delcell" onclick="remTask(this);">X</button></td><td><button class="modcell" onclick="openModForm(this);">[]</button></td><td>Taskg</td><td>Personas</td><td></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td><button class="delcell" onclick="remTask(this);">X</button></td><td><button class="modcell" onclick="openModForm(this);">[]</button></td><td>Required_task</td><td>Personas</td><td></td><td></td><td></td><td></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td><button class="delcell" onclick="remTask(this);">X</button></td><td><button class="modcell" onclick="openModForm(this);">[]</button></td><td>longone777</td><td>Personas</td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td><td class="bgtd"></td></tr></table></div>
</body>
</html>

As you can see the first three cells have some issue - the border runs right at the end of the content although I have specified the width of the cells. Is it related to their positioning outside the actual table? How could I fix it - I would like them to have nice cells as wide as I have specified them with grey collapsed borders in-between. (just like the rest of the table looks)

Community
  • 1
  • 1
Jens-Konrad Preem
  • 179
  • 3
  • 17

1 Answers1

1

There is a typo in your code. You have used min-width:150 and not specified px. Adding that should solve your problem.

Check this fiddle here : https://jsfiddle.net/gurtejsingh/6pm6rztx/3/

Also, I updated your position properties to give the absolute cells a better alignment.

Hope this helps. Cheers.

Gurtej Singh
  • 3,244
  • 1
  • 14
  • 27