Question

我想为表格单元格创建完全不变的高度和宽度。我只想要使用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时，所有单元格都移动到文件中的另一个位置。你能告诉我，我的愚蠢的盒子如何保持我告诉他们的高度和宽度吗？

Answer 1

简短的回答是你必须使用内部元素来设定你的高度。将div中的所有单元格内容换行并在其中应用您的ID。更好，使用可重用的公共类。

<强> Demo

<td>
    <div id="completed_task" class="completedTask"> ... </div>
</td>

完整性不变的高度和表格细胞

2 个答案: