Строки таблицы в строках таблицы

Question

Это часть моей текущей таблицы:

Это таблица, которая отображает задачи завершенные, длительность задачи и отдел работал в то время (Который означает, что один вход состоит из Verrichtete Arbeit, Zeit и Abteilung, и они подключены). Эти записи находятся в рядах будних дней (Mo. Di.Mi). Я хочу добавить новые записи для строк каждого дня недели в эту таблицу. Проблема возникает, когда есть td со слишком большим текстом, что приводит к использованию двух строк для одной записи (например, запись в Verrichtete Arbeit в понедельник и запись в Abteilung в понедельник). Тот факт, что используются 2 строки, не является проблемой. Но когда есть новая запись, то новое значение Zeit будут размещены непосредственно под последним значением, и это будет выглядеть следующим образом:

Вот картина, редактируется в садомазо, который должен отображать как это должно выглядеть следующим образом:

Это настройка HTML, который я использую для этой цели:

<table id="report_table"> 
    <tr id="tr_table_header"> 
    <th id="th_week_day"></th> 
    <th id="th_completed_task">Verrichtete Arbeit</th> 
    <th id="th_hours_worked">Zeit</th> 
    <th id="th_working_department">Abteilung</th> 
    </tr> 
    <tr class="tableRowDay"> 
    <td class="weekDay">Mo.</td> 
    <td class="completedTask">fooo foo foo ofoo foo ofoo ofoofooofff Foo foo foo foo fooo foo foooooooooooo fooooo fooo foo fooo foooo fooo</td> 
    <td class="hoursWorked">2</td> 
    <td class="workingDepartment">Forschung und Entwicklung</td> 
    </tr> 
    <tr> 
    <td class="weekDay">Di.</td> 
    <td class="completedTask">Bar</td> 
    <td class="hoursWorked">4</td> 
    <td class="workingDepartment">Technik</td> 
    </tr> 
    <tr> 
    <td class="weekDay">Mi.</td> 
    <td class="completedTask">Baz</td> 
    <td class="hoursWorked">5</td> 
    <td class="workingDepartment">Forschung und Entwicklung</td> 
    </tr> 
    <tr> 
    <td class="weekDay">Do.</td> 
    <td class="completedTask">Lorem</td> 
    <td class="hoursWorked">3</td> 
    <td class="workingDepartment">Forschung und Entwicklung</td> 
    </tr> 
    <tr> 
    <td class="weekDay">Fr.</td> 
    <td class="completedTask">Ipsum</td> 
    <td class="hoursWorked">5</td> 
    <td class="workingDepartment">Technik</td> 
    </tr> 
    <tr> 
    <td class="weekDay">Sa.</td> 
    <td class="completedTask"></td> 
    <td class="hoursWorked">5</td> 
    <td class="workingDepartment">Technik</td> 
    </tr> 
</table> 

И это мой текущий CSS:

#a4 { 
    background-color: white; 
    width: 210mm; 
    height: 297mm; 
    margin: 0 auto; 
} 

table { 
    border-collapse: collapse; 
    overflow: hidden; 
} 

table#report_table { 
    table-layout: fixed; 
    width: 180mm; 
    margin: 0 auto; 
} 

table, th, td { 
    border: 0.6mm solid black; 
} 

#tr_table_header { 
    height: 5mm; 
    max-height: 5mm; 
} 

#th_week_day { 
    width: 5mm; 
    max-width: 5mm; 
} 

#th_hours_worked { 
    width: 10mm; 
    max-width: 10mm; 
} 

#th_working_department { 
    width: 35mm; 
    max-width: 35mm; 
} 

.weekDay { 
    width: 10mm; 
    max-width: 10mm; 
    height: 25mm; 
    max-height: 25mm; 
    text-align: center; 
    /* Safari */ 
    -webkit-transform: rotate(-90deg); 
    /* Firefox */ 
    -moz-transform: rotate(-90deg); 
    /* IE */ 
    -ms-transform: rotate(-90deg); 
    /* Opera */ 
    -o-transform: rotate(-90deg); 
    /* Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

.completedTask { 
    height: 25mm; 
    max-height: 25mm; 
    text-align: justify; 
    vertical-align:top; 
} 

.hoursWorked { 
    width: 10mm; 
    max-width: 10mm; 
    height: 25mm; 
    max-height: 25mm; 
    text-align: center; 
    vertical-align: top; 
} 

.workingDepartment { 
    width: 15mm; 
    max-width: 15mm; 
    height: 25mm; 
    max-height: 25mm; 
    text-align: center; 
    vertical-align: top; 
} 

Фиксированные значения (мм, см) на цели, потому что сайт должен быть напечатан позже! Я думал об использовании таблицы внутри строки дня недели, но прикрутил весь мой проект к этому, что является неудачным. Я предпочитаю не использовать javascript, но только css и html, если это возможно. Каждое предложение или помощь приветствуются!

Answer 1

Вы можете сделать это, образец структуры таблицы в таблице и сценарий.

Заметь, я просто добавил один день недели, хотя это показывает концепцию, и вы будете иметь, чтобы добавить свои собственные границы и т.д.

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
table, th, td { 
 
    border: 0.6mm solid black; 
 
} 
 

 
#th_week_day, 
 
.weekDay { 
 
    width: 40px; 
 
} 
 

 
.tr-inner th, 
 
.tr-inner td { 
 
    width: 20%; 
 
    vertical-align: top; 
 
} 
 
.tr-inner th:first-child, 
 
.tr-inner td:first-child { 
 
    width: 60%; 
 
}

<table id="report_table"> 
 
    <tr id="tr_table_header"> 
 
    <th id="th_week_day"></th> 
 
    <th> 
 
     <table> 
 
     <tr class="tr-inner"> 
 
      <th id="th_completed_task">Verrichtete Arbeit</th> 
 
      <th id="th_hours_worked">Zeit</th> 
 
      <th id="th_working_department">Abteilung</th> 
 
     </tr> 
 
     </table> 
 
    </th> 
 
    </tr> 
 
    <tr class="tableRowDay"> 
 
    <td class="weekDay">Mo.</td> 
 
    <td> 
 
     <table> 
 
     <tr class="tr-inner"> 
 
      <td class="completedTask">fooo</td> 
 
      <td class="hoursWorked">2</td> 
 
      <td class="workingDepartment">Forschung</td> 
 
     </tr> 
 
     <tr class="tr-inner"> 
 
      <td class="completedTask">fooo foo foo ofoo foo ofoo ofoofooofff Foo foo foo foo fooo foo foooooooooooo fooooo fooo foo fooo foooo fooo</td> 
 
      <td class="hoursWorked">4</td> 
 
      <td class="workingDepartment">Forschung und Entwicklung</td> 
 
     </tr> 
 
     <tr class="tr-inner"> 
 
      <td class="completedTask">fooo foo foo ofoo foo ofoo </td> 
 
      <td class="hoursWorked">2</td> 
 
      <td class="workingDepartment">Entwicklung</td> 
 
     </tr> 
 
     </table> 
 
    </td> 
 
    </tr> 
 
</table>