Tablo satırları

Question

Bu benim şimdiki tablosunun bir parçası olan bir girdinin Verrichtete Arbeit, Zeit ve Abteilung ve bunların bağlı olduğu anlamına gelir. Bu girişler, hafta içi satırlarda (Mo. Di. Mi.) Şimdi bu masaya her hafta gününün satırları için yeni girişler eklemek istiyorum. Sorun, çok fazla metin içeren bir td olduğunda, bir giriş için 2 satır kullanılmasına neden olur (örneğin, Pazartesi günü Verrichtete Arbeit giriş ve pazartesi günü Abteilung giriş). 2 satırın kullanıldığı gerçeği sorun değil. yeni bir giriş, Zeit yeni değer varken Ama son değerin altında doğrudan yerleştirilecek ve bu şekilde görünecektir: Burada

gösterecektir hangi GİMP düzenlenmiş bir resim olduğunu

<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> 

:

Bu benim bu amaç için kullanmak HTML kurgusunda: gibi görünmelidir nasıl

Bu da benim şimdiki 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; 
} 

sabit değerler (mm cm) web sitesi daha sonra basılmış olacaktır çünkü bilerek vardır! Hafta içi dizinin içinde bir masa kullanmayı düşünmüştüm ama tüm tasarımımı bununla karıştırdım, ki bu talihsiz bir durum. Javascript kullanmamayı tercih ediyorum ancak mümkünse sadece css ve html. Her öneri veya yardım takdir edilir!

Answer 1

Bunu yapabilirsin, bir tablo içinde tablo yapısının örneği ve komut dosyası yok. o kavram gösteriyor olsa

Not, ben sadece bir hafta içi eklendi ve vb kendi sınırlarını,

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>