0
テーブルセルの高さと幅を完全に変更したいと思います。私は排他的に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全ての細胞が、ファイル内の別の場所に移動しようとしたとき。あなたは私の愚かな箱が、私が持っていると言った高さと幅をどうやって保持しているか教えてもらえますか？
あなたの答えをありがとう、それはこれまで助けてくれました。しかし、同じ設定を何度も '' 'に使用して、同じIDを常に再使用することができますか？ –
@IbrahimApachiこのようなIDの代わりにクラスを使用します。これは '.completedTask {...}' – LGSon