I want to create completely unchangeable height and width for my table cells. I only exclusively want to use HTML and CSS, no Javascript for that. My current setup looks like this:
HTML
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
{{ template_head |safe }}
<link rel="stylesheet" type="text/css" href="{% static 'css/standard_report.css' %}">
<style>
{{ css_styles }}
</style>
</head>
<body>
{{ images |safe }}
{{ template_body |safe }}
<table id="report_table" class="reportTable">
<tr>
<th id="th_week_day" class="thWeekDay">Tag</th>
<th id="th_completed_task" class="thCompletedTask">Verrichtete Arbeit</th>
<th id="th_hours_worked" class="hoursWorked">Zeit</th>
<th id="th_working_department" class="thWorkingDepartment">Abteilung</th>
</tr>
<tr>
<td id="week_day" class="weekDay">Mo.</td>
<td id="completed_task" class="completedTask">Foo foo foo foo fooo foo foo fooooo fooo foo fooo foooo fooo fooof ooo foo foo foo fo o foo fooo fooof oofo ofoo fooof oofo ofooo fooofoo ofooo fooofo ofoo fooo fooo fooof ooof ooofo oofooof oofoo fooofo oo fooo fooof oofo ofoo fooof oofo ofooo fooofoo ofooo fooofo ofoo fooo fooo fooof oo fooo fooof oofo ofoo fooof oofo ofooo fooofoo ofooo fooofo ofoo fooo fooo fooof oo fooo fooof oofo ofoo fooof oofo ofooo fooofoo ofooo fooofo ofoo fooo fooo fooof oo fooo fooof oofo ofoo fooof oofo ofooo fooofoo ofooo fooofo ofoo fooo fooo fooof oo</td>
<td id="hours_worked" class="hoursWorked">2</td>
<td id="working_department" class="workingDepartment">Forschung und Entwicklung</td>
</tr>
<tr>
<td id="week_day" class="weekDay">Di.</td>
<td id="completed_task" class="completedTask">Bar</td>
<td id="hours_worked" class="hoursWorked">4</td>
<td id="working_department" class="workingDepartment">Technik</td>
</tr>
<tr>
<td id="week_day" class="weekDay">Mi.</td>
<td id="completed_task" class="completedTask">Baz</td>
<td id="hours_worked" class="hoursWorked">5</td>
<td id="working_department" class="workingDepartment">Forschung und Entwicklung</td>
</tr>
<tr>
<td id="week_day" class="weekDay">Do.</td>
<td id="completed_task" class="completedTask">Lorem</td>
<td id="hours_worked" class="hoursWorked">3</td>
<td id="working_department" class="workingDepartment">Forschung und Entwicklung</td>
</tr>
<tr>
<td id="week_day" class="weekDay">Fr.</td>
<td id="completed_task" class="completedTask">Ipsum</td>
<td id="hours_worked" class="hoursWorked">5</td>
<td id="working_department" class="workingDepartment">Technik</td>
</tr>
<tr>
<td id="week_day" class="weekDay">Sa.</td>
<td id="completed_task" class="completedTask"></td>
<td id="hours_worked" class="hoursWorked">5</td>
<td id="working_department" class="workingDepartment">Technik</td>
</tr>
</table>
</body>
</html>
CSS
body {
width: 21cm;
height: 29.7cm;
border: 1px solid black;
margin: 0 auto;
font-size: 0.75em;
}
table.reportTable {
border-collapse: collapse;
overflow: hidden;
table-layout: fixed;
}
table, th, td {
border: 1px solid black;
}
#report_table {
width: 16cm;
margin: 0 auto;
}
#th_week_day {
width: 1cm;
max-width: 1cm;
}
#week_day {
width: 1cm;
max-width: 1cm;
height: 2.5cm;
max-height: 2.5cm;
text-align: center;
}
#completed_task {
width: 7cm;
max-width: 7cm;
height: 2.5cm;
max-height: 2.5cm;
text-align: justify;
vertical-align:top;
}
#hours_worked {
width: 0.5cm;
max-width: 0.5cm;
height: 2.5cm;
max-height: 2.5cm;
text-align: center;
}
#working_department {
width: 1.5cm;
max-width: 1.5cm;
height: 2.5cm;
max-height: 2.5cm;
text-align: center;
}
The width and height of the table cells unfortunately doesn't apply anymore and gets expanded when the text is too long. I made a test and inserted a lot of foos and the cell expanded like this:
When I tried inline=block all the cells moved to another place in the file. Can you guys tell me how my stupid boxes just keep the height and width that I tell them to have?
