Fix fluctuating tbody heights by not using tables.
This commit is contained in:
parent
742a51b674
commit
d89bcbec06
GPG key ID:
C0F1D326C7626543
3 changed files with 225 additions and 185 deletions
|
|
@ -42,53 +42,82 @@ hr {
|
|||
border-top: 1px solid black;
|
||||
}
|
||||
|
||||
td {
|
||||
height: 1.5em;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
table.week {
|
||||
layout: fixed;
|
||||
.week {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
table.week th {
|
||||
height: 2em;
|
||||
font-weight: normal;
|
||||
.week-head {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table.week tbody:nth-child(odd) tr:nth-child(odd) {
|
||||
.day {
|
||||
flex-basis: 18%;
|
||||
margin-top: -1px;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
border: 1px solid #000000;
|
||||
}
|
||||
|
||||
.week-foot {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table.week tbody:nth-child(even) tr:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
table.week thead th:nth-last-child(-n+2) {
|
||||
width: 10%;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
table.week td:nth-last-child(-n+2) {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table.week tbody:last-child tr:last-child td:first-child {
|
||||
.week-foot div:first-child {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.vtable {
|
||||
width: 1em;
|
||||
.day-line {
|
||||
align-items: center;
|
||||
flex-basis: 20%;
|
||||
}
|
||||
|
||||
.day:nth-child(even) .day-line:nth-child(even) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.day:nth-child(odd) .day-line:nth-child(odd) {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
|
||||
.flexh {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flexv {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flexgrow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flexten {
|
||||
flex-basis: 10%;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flexfive {
|
||||
flex-basis: 5%;
|
||||
}
|
||||
|
||||
.vertical {
|
||||
text-align: center;
|
||||
writing-mode: vertical-lr;
|
||||
transform: rotate(180deg);
|
||||
border-left: 1px solid #000000;;
|
||||
}
|
||||
|
||||
.sign {
|
||||
|
|
|
|||
|
|
@ -80,11 +80,11 @@ function populate(pnum) {
|
|||
const week = node.getElementsByClassName("week")[0].querySelectorAll(".day");
|
||||
let weekh = null;
|
||||
for (let i=0; i < week.length && i < data.days.length; i++) {
|
||||
let day = week[i].children;
|
||||
let day = week[i].querySelectorAll(".day-line");
|
||||
let dayh = null;
|
||||
for (let j=0; j < day.length && j < data.days[i].length; j++) {
|
||||
day[j].querySelectorAll("td")[0].textContent = data.days[i][j][0];
|
||||
day[j].querySelectorAll("td")[1].textContent = data.days[i][j][1];
|
||||
day[j].querySelectorAll("div")[0].textContent = data.days[i][j][0];
|
||||
day[j].querySelectorAll("div")[1].textContent = data.days[i][j][1];
|
||||
dayh += data.days[i][j][1];
|
||||
}
|
||||
day[day.length-1].querySelector(".subtotal").textContent = dayh;
|
||||
|
|
|
|||
|
|
@ -12,164 +12,175 @@
|
|||
</div>
|
||||
|
||||
<div class="pg-content">
|
||||
<table class="week">
|
||||
<thead>
|
||||
<tr>
|
||||
<th colspan="2">Unterweisungen, ausgeführte Arbeiten usw.</th>
|
||||
<th>Einzel-<br>Stunden</th>
|
||||
<th>Gesammt-<br>Stunden</th>
|
||||
</thead>
|
||||
<tbody class="day">
|
||||
<tr>
|
||||
<th rowspan="5" class="vtable"><div class="vertical">Montag</div></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="subtotal"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<tbody class="day">
|
||||
<tr>
|
||||
<th rowspan="5" class="vtable"><div class="vertical">Dienstag</div></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="subtotal"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<div class="week">
|
||||
<div class="week-head flexh flexfive">
|
||||
<div class="flexgrow">Unterweisungen, ausgeführte Arbeiten usw.</div>
|
||||
<div class="flexten">Einzel-Stunden</div>
|
||||
<div class="flexten">Gesammt-Stunden</div>
|
||||
</div>
|
||||
|
||||
<tbody class="day">
|
||||
<tr>
|
||||
<th rowspan="5" class="vtable"><div class="vertical">Mittwoch</div></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="subtotal"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<div class="day flexh">
|
||||
<div class="vertical">Montag</div>
|
||||
<div class="day-content flexv" onclick="editDayOpen(this)">
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="subtotal green flexten"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tbody class="day">
|
||||
<tr>
|
||||
<th rowspan="5" class="vtable"><div class="vertical">Donnerstag</div></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="subtotal"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<div class="day flexh">
|
||||
<div class="vertical">Dienstag</div>
|
||||
<div class="day-content flexv" onclick="editDayOpen(this)">
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="subtotal green flexten"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="day flexh">
|
||||
<div class="vertical">Mittwoch</div>
|
||||
<div class="day-content flexv" onclick="editDayOpen(this)">
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="subtotal green flexten"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="day flexh">
|
||||
<div class="vertical">Donnerstag</div>
|
||||
<div class="day-content flexv" onclick="editDayOpen(this)">
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="subtotal green flexten"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="day flexh">
|
||||
<div class="vertical">Freitag</div>
|
||||
<div class="day-content flexv" onclick="editDayOpen(this)">
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="sh flexten"></div>
|
||||
</div>
|
||||
<div class="day-line flexh">
|
||||
<div class="flexgrow"></div>
|
||||
<div class="sh flexten"></div>
|
||||
<div class="subtotal green flexten"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="week-foot flexh flexfive">
|
||||
<div class="flexgrow">Wochenstunden</div>
|
||||
<div class="total flexten"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<tbody class="day">
|
||||
<tr>
|
||||
<th rowspan="5" class="vtable"><div class="vertical">Freitag</div></th>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td class="subtotal"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr style="height:1em">
|
||||
<td colspan="3">Wochenstunden</td>
|
||||
<td class="total"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="sign">
|
||||
<table>
|
||||
<tr>
|
||||
|
|
|
|||
Loading…
Reference in a new issue