improved timetable closes #100

static/style.css

@@ -12,6 +12,30 @@
 	line-height: 130px;
 }
 
+#timetable.table-bordered td:first-child {
+	border-left: 1px solid #ddd;
+}
+#timetable.table-bordered {
+	border-collapse: separate;
+	table-layout: fixed;
+}
+
+#timetable.table-bordered tr.hourlytime > td {
+	border-top-color: black;
+}
+
+#timetable.table-bordered tr > td {
+	border-bottom: 0px;
+}
+
+#timetable.table-bordered td.newday {
+	border-left-color: black;
+}
+
+#timetable.table-bordered td {
+	border-right: 0px !important;
+}
+
 .thumbnailimg {
 	height: 130px;
 	position: relative;

templates/timetable.html

@@ -12,17 +12,17 @@
 				<a href="{{url_for('timetable', kw=0) }}" style="width: 80px;" class="center-block btn btn-default">today</a>
 			</div>
        		</div>
-		<div class="panel-body row table-responsive">
-			<table class="table-bordered col-xs-12">
-				<tr><th></th>{% for d in days if (d.index < 5) or (d.lectures|length) > 0%}<th colspan="{{d.maxcol}}">{{ d.date.strftime("%A (%d.%m.%Y)") }}</th>{% endfor %}</tr>
+		<div class="panel-body row table-responsive" style="margin-left: 0px; margin-right: 0px; padding-left: 0px; padding-right: 0px">
+			<table id="timetable" class="table-bordered col-xs-12">
+				<tr><th style="width: 30px;"></th>{% for d in days if (d.index < 5) or (d.lectures|length) > 0 %}<th style="width: {{ 100/(days|length) }}%" colspan="{{d.maxcol}}">{{ d.date.strftime("%A (%d.%m.%Y)") }}</th>{% endfor %}</tr>
 				{% for t in times %}
 				{% set time_loop = loop %}
-				<tr height="12px">
+				<tr height="12px" {% if t.strftime("%M") == "00" %} class="hourlytime" {% endif %}>
 					{% if ((loop.index - 1) is divisibleby 4)  %} <td rowspan="4" style="vertical-align: top;">{{ t.strftime("%H:%M") }}</td> {% endif %}
 					{% for d in days  if (d.index < 5) or (d.lectures|length) > 0 %}
 						{% for i in range(1,d.maxcol+1) %}
 						{% for l in d.lectures|selectattr('timetable_col','equalto',i) if (((l.time.time() > t) and (l.time.time() < times[time_loop.index+1])) != (l.time.time() == t ) ) %}
-						<td rowspan="{{l.duration / 15}}" style="background: {% if l.visible and l.course.visible %}lightgrey;{% else %}#f2dede{% endif %}">
+						<td {% if i == 1 %} class="newday"{% endif %} rowspan="{{l.duration / 15}}" style="background: {% if l.visible and l.course.visible %}lightgrey;{% else %}#f2dede{% endif %}">
 							<p class="small">
 							<strong><a class="hidden-print" href="{{url_for('course', id=l.course_id)}}#lecture-{{l.id}}">{{l.course.short}}</a><span class="visible-print-inline">{{l.course.short}}</span></strong><br>
 								{{l.time.strftime("%H:%M")}} - {{l.time_end.strftime("%H:%M")}}<br>
@@ -31,7 +31,7 @@
 							{% else %}
 								{% for l in d.lectures|selectattr('timetable_col','equalto',i) if (l.time.time() < t) and (l.time_end.time() > t) %}
 								{% else %}
-									<td></td>
+								<td {% if i == 1 %} class="newday"{% endif %}></td>
 								{% endfor %}
 							{% endfor %}
 						{% endfor %}