Skip to content

Instantly share code, notes, and snippets.

@hogashi

hogashi/ganttchart.html

Created December 5, 2017 19:37
Show Gist options
  • Save hogashi/c5b1e3386d628ca1d8ebbd0e6ad43446 to your computer and use it in GitHub Desktop.
Save hogashi/c5b1e3386d628ca1d8ebbd0e6ad43446 to your computer and use it in GitHub Desktop.
Download ZIP
Gantt chart style example written in HTML/CSS
Raw
ganttchart.html
<!DOCTYPE html>
<html>
<head>
<title>gantt chart</title>
<style>
* {
margin: 0;
padding: 0;
}
main {
margin: 20px;
}
#gantt {
width: 600px;
display: grid;
grid-template: repeat(5, 1fr) / repeat(6, 1fr);
padding: 0 2px;
border: 1px solid #000;
box-sizing: border-box;
}
#columns {
width: 100%;
grid-area: 1 / 1 / 6 / 7;
display: grid;
grid-template: repeat(5, 1fr) / repeat(6, 1fr);
margin: 2px 0;
}
#columns > .column {
grid-row: 1 / 6;
display: grid;
grid-template: repeat(5, 1fr) / auto;
border: solid #000;
border-right: dotted;
border-width: 1px 1px 1px 0;
box-sizing: border-box;
}
#columns > .column:first-child {
border-left: 1px dotted #000;
}
#columns > .column > .columnhead {
grid-row: 1 / 2;
border-bottom: 1px solid #000;
box-sizing: border-box;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
}
#tasks {
padding: 2px;
box-sizing: border-box;
grid-area: 2 / 1 / 6 / 7;
display: grid;
grid-template: repeat(4, 1fr) / repeat(6, 1fr);
}
#tasks > .task {
grid-column: 1 / 7;
display: grid;
grid-template: auto / repeat(6, 1fr);
border-bottom: 1px dotted #000;
box-sizing: border-box;
}
#tasks > .task > .taskrect {
margin: 2px;
padding: 0 4px;
background: rgba(0, 255, 200, 0.3);
box-shadow: 1px 1px rgba(0, 0, 0, 0.1);
}
#task1 {
grid-area: 1 / 1 / 2 / 4;
}
#task2 {
grid-area: 2 / 1 / 3 / 5;
}
#task3 {
grid-area: 3 / 3 / 4 / 7;
}
#task4 {
grid-area: 4 / 4 / 5 / 6;
}
#tasks > .blanktask {
background: rgba(250, 250, 250, 0.3);
border: 1px solid #000;
box-sizing: border-box;
}
</style>
</head>
<body>
<main>
<div id="gantt">
<div id="columns">
<div id="col1" class="column">
<div class="columnhead">日程1</div>
<div class="columnbody"></div>
</div>
<div id="col2" class="column">
<div class="columnhead">日程2</div>
<div class="columnbody"></div>
</div>
<div id="col3" class="column">
<div class="columnhead">日程3</div>
<div class="columnbody"></div>
</div>
<div id="col4" class="column">
<div class="columnhead">日程4</div>
<div class="columnbody"></div>
</div>
<div id="col5" class="column">
<div class="columnhead">日程5</div>
<div class="columnbody"></div>
</div>
<div id="col6" class="column">
<div class="columnhead">日程6</div>
<div class="columnbody"></div>
</div>
</div>
<div id="tasks">
<div class="task"><div id="task1" class="taskrect">工程1</div></div>
<div class="task"><div id="task2" class="taskrect">工程2</div></div>
<div class="task"><div id="task3" class="taskrect">工程3</div></div>
<div class="task"><div id="task4" class="taskrect">工程4</div></div>
</div>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment