表格单元格的高度和宽度完全不可更改[重复]答案

【问题标题】：Completety unchangeable height and witdth for table cells [duplicate]表格单元格的高度和宽度完全不可更改[重复]
【发布时间】：2016-03-26 01:17:29
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

简短的回答是您必须使用内部元素来设置您的高度。将所有单元格内容包装在 div 中并在那里应用您的 ID。更好的是，使用可重用的通用类。

Demo

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