HTML adjust table rows in 1st column to fill height proportionally to 2nd column height

Question

I am using a reporting tool, which allows slight customising through HTML.

Constrains:

styles only (no CSS)
tables only (no DIVs)

This tool will print multiple rows per each student, depending on subject matters, learning objects, etc. In a word, number of rows in the table can vary.

The issue is, if the 2nd column in the table is higher than the first one, the rows in the first column will not fill height, thus leaving blank space after the last row: Text

What I would like to achieve, is to adjust row heights in 1st column to fill column height proportionally so that there's no extra gap after the last row, in case the 2nd column is higher than the first one (see JSFiddle below)

Report code templates, which could be adjusted somehow:

Main loop template


   
      
           «·materia·» «·materia - breve specifica·» «·materia - asterischi·» 
      
   
   
      
         LOOP("band-22","/studenti/materie/nuove competenze"):: «·valore lettere·» != ''
         «·nota o giudizio·»

Row template


   
      
         «·descrizione con a capo·»
         «·valore sigla·»

Generated output by reporting tool:


   
      
           INGLESE   
      
   
   
      
         
            
               
                  
                     Ascolto (comprensione orale)
                     C
                  
                  
                     Parlato (produzione e interazione orale)
                     A
                  
                  
                     Lettura (comprensione scritta)
                     C
                  
                  
                     Ascolto (comprensione orale)
                     C
                  
                  
                     Parlato (produzione e interazione orale)
                     A
                  
                  
                     Lettura (comprensione scritta)
                     C
                  
               
            
                 
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis a sapien sit amet hendrerit. Nam cursus erat at magna mattis consequat. Vestibulum sed quam non massa tristique fringilla. Morbi sagittis tincidunt nibh sit amet sodales. Donec vitae ligula felis. Mauris eu tincidunt leo. Pellentesque placerat nisl in nibh elementum, egestas tincidunt eros consequat. Quisque faucibus iaculis eros, nec hendrerit odio tempus sollicitudin. Proin in porta metus. Integer imperdiet mattis leo et consectetur. Duis lacinia scelerisque laoreet. Cras molestie tellus vel libero porta ornare. Integer tincidunt viverra suscipit. Mauris non pellentesque nisi. Nullam commodo, mi in vestibulum tincidunt, diam odio congue metus, quis lacinia enim est ac lacus. Donec ipsum nibh, vehicula sed metus sit amet, fringilla bibendum odio. Suspendisse vel ultrices eros. Duis vel tortor rutrum, pharetra nulla at, molestie ex. Proin tincidunt lectus sit amet metus feugiat iaculis. In hac habitasse platea dictumst. Fusce mollis tristique ligula suscipit luctus. Sed sed nibh vitae diam mollis pretium nec in nisi. Aenean auctor interdum efficitur. Donec id aliquam nunc.

https://jsfiddle.net/kf0u458c/

rikg93 · Accepted Answer

If the html was generated, as you said, by an external element and not by you, and if there are no options to act on provided by the external element, my idea is to act on the element by intercepting it on a stylesheet, although as you wrote this is not the way you want to go.

For example

table {
        table-layout: fixed;
        height: 100%;
    }

To be more specific, I would add an id to the table with a bottom-line class, so that the change is unique.

For example

#table1 {
   table-layout: fixed;
   height: 100%;
}

Link example

HTML adjust table rows in 1st column to fill height proportionally to 2nd column height

Answers (1)

Related Questions