CSS Gantt chart experiment

This is an experiment to display a Gantt chart using CSS. This could be easily created using a server-side scripting language such as PHP.

Week 13 Week 14 Week 15
T4 W5 T6 F7 S8 S9 M10 T11 W12 T13 F14 S15 S16 M17 T18 W19
Task 1 (Chris)
Task 2 (Steve)
Task 3 (Dave)


In this example there are three tasks. Task one lasts from Wednesday 5th in Week 13 to Monday 10th, Week 14. Task two last from Saturday 8th in Week 13 to Friday 14th in Week 1. Task 3 lasts from Monday 10th in Week 14 to Thursday 18th in Week 15.

Calculate the number of days to be shown

First of all we need to calculate how many days to show in the Gantt chart. In this examples the tasks stretch from Wednesday 5th to Thursday 18th, 14 complete days. We'll add an extra day at the beginning and end to make it neater, bringing the total to 16 days. The Gantt table is set to 100% width, but there is an example with a fixed-width table here. For much longer projects, the chart could show weeks, months or years.

Calculate the size of the columns

We then divide the full width by the number of days we have to fit in - 16 - giving us a width for each day of 6.25%. Somke browsers can be a bit funny about percentage widths with non-whole numbers, so I've heard, so be careful about that. Perhaps adding a few extra days to the beginning or end so you can divide the width by a more normal number (10, 20, 50 etc) would be wise.

With me so far? Good.

Write out the tasks and their bars

Then just write out a table row for each task. This row has a single cell with a colspan of 16 - the number of days. This cell will contain our task bar, and inside the taskbar is the title of the task and name of the person assigned to it.

The task bar is a <div> with a class of the task ID. In the stylesheet rules we then apply a width of the number of days the task lasts for - 5% for each day, in our example - and apply a margin-left value of the number of days offset from the start day. Easy!