完整不變的高度和witdth表格單元格

我想爲我的表格單元格創建完全不變的高度和寬度。我只專門想使用HTML和CSS，沒有Javascript的。我目前的設置是這樣的：完整不變的高度和witdth表格單元格

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所有的細胞移動到文件在另一個地方。你們能告訴我，我的笨蛋盒子是如何保持我告訴他們的高度和寬度？

來源

2016-03-25 BoJack Horseman

簡單的答案是，你必須使用內部元素來設置你的身高。將所有單元格內容封裝在div中並在其中應用您的ID。更好的是，使用可重用的通用類。

Demo

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

完整不變的高度和witdth表格單元格

回答

相關問題