<分区>
html - 表格单元格的高度和宽度完全不变
我想为我的表格单元格创建完全不可更改的高度和宽度。我只想专门使用 HTML 和 CSS，而不是 Javascript。我当前的设置如下所示:
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;
}
不幸的是，表格单元格的宽度和高度不再适用，当文本太长时会展开。我做了一个测试并插入了很多 foos 并且单元格扩展如下:
当我尝试 inline=block 时，所有单元格都移动到文件中的另一个位置。你们能告诉我我那些愚蠢的盒子是如何保持我告诉它们的高度和宽度的吗？
最佳答案
简短的回答是您必须使用内部元素来设置您的高度。将所有单元格内容包装在 div 中并在那里应用您的 ID。更好的是，使用可重用的通用类。
<td>
<div id="completed_task" class="completedTask"> ... </div>
</td>
此外，您正在重复使用具有相同值的 ID。这是无效的。
关于html - 表格单元格的高度和宽度完全不变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36224486/