Полностью незаменимая высота и высота для ячеек таблицы

Я хочу создать полностью неизменяемую высоту и ширину для своих ячеек таблицы. Я только хочу использовать 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; 
}

Ширина и высота ячеек таблицы, к сожалению, не применяется больше, и получает расширяется, когда текст слишком длинный. Я сделал тест и вставил много Фооса и клетка расширяется, как это:

Когда я попытался inline=block все клетки перемещены в другое место в файле. Можете ли вы, ребята, сказать мне, как мои глупые коробки просто поддерживают высоту и ширину, которые я им скажу?

источник

2016-03-25 BoJack Horseman

Короткий ответ заключается в том, что вы должны использовать элементы интерьера, чтобы установить свои высоты. Оберните содержимое всех ячеек в div и примените свои идентификаторы. Лучше использовать общие классы, которые можно использовать повторно.

Demo

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

Полностью незаменимая высота и высота для ячеек таблицы

ответ

Смежные вопросы