gantt pro MB

by Petr Haluza

HTML

<div class="container">
      <table id="gantt">
        <thead>
          <tr>
            <th></th>
            <th>Název ukolu</th>
            <th>Začátek</th>
            <th>Konec</th>
            <th>Trvání</th>
            <th>Status</th>
            <th>%</th>
            <th>Přiřazeno</th>
            <th>
              <div class="timeline_grid">
                <div class="t_g_tyden">
                  <span class="t_g_den">12.</span>
                  <span class="t_g_den">13.</span>
                  <span class="t_g_den we">14.</span>
                  <span class="t_g_den we">15.</span>
                </div>
              </div>
            </th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td><span>🏁</span></td>
            <td>Nový web</td>
            <td>1.10.2021</td>
            <td>31.10.2021</td>
            <td>31</td>
            <td></td>
            <td>55%</td>
            <td></td>
            <td><div class="timeline" style="margin-left:0%; width:100%"></div></td>
          </tr>
          
          <tr class="faze dokonceno">
            <td class="id"><span>1</span></td>
            <td class="nazev">Grafický návrh</td>
            <td class="od">1.10.2021</td>
            <td class="do">7.10.2021</td>
            <td class="dni">7</td>
            <td class="status">Dokončeno</td>
            <td class="procent">100%</td>
            <td class="zpracovava">HAP</td>
            <td><div class="timeline" style="margin-left:0%; width:50%"></div></td>
          </tr>
          
          <tr class="ukol donokceno">
            <td class="id"><span>1a</span></td>
            <td class="nazev">Grafický návrh</td>
            <td class="od">1.10.2021</td>
            <td class="do">3.10.2021</td>
            <td class="dni">3</td>
            <td class="status">Dokončeno</td>
            <td class="procent">100%</td>
            <td class="zpracovava">HAP</td>
            <td><div class="timeline"...

CSS

* { font: normal 13px Arial, sans-serif;}
.container { width: 100%; border: 1px solid gray; padding: 5px;}
.timeline {min-width:250px}

#gantt {width:100%; border: none; border-left: solid 1px #DDEFEF;  border-right: solid 1px #DDEFEF; border-collapse: separate; border-spacing: 0 }
#gantt thead th { background-color: #DDEFEF; border: none; color: #336B6B; padding: 5px 10px; text-align: left; white-space: nowrap}
#gantt tbody td { border-bottom: solid 1px #DDEFEF; color: #333; padding: 5px 10px; white-space: nowrap;
}