JSFiddle - React, Tailwind, and code Playground

HTML

<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"...

CSS

#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;}