Resize thead height with respect to tbody height using CSS

Question

I have the following table where the height of the tbody is dynamic. How can I make the height of the thead change dynamically in proportional to tbody, so that every cell of the tbody is perfectly aligned with the respective thead?

P.S. The table is obtained as an object, so its orientation cannot be edited as a vertical table.

<style>
  h1
{
  border-bottom: 3px solid #000;
}
    #tabulu thead
    {
        float:left
    }
    #tabulu tbody
    {
        float:right
    }
    #tabulu tbody td
    {
        display: block;
        padding:8px;
        border: 1px solid black;
        border-collapse: collapse;
        /*multiline wrap*/
        white-space:pre-wrap; 
    }
    #tabulu thead th {
        display: block; 
        text-align: left;
        padding:8px;
        border: 1px solid black;
        border-collapse: collapse;
        background-color: #808080; color: white;
    }
    #tabulu thead th:first-child
    {
        display:block;
    }

    #tabulu td:first-child
    {
        display:block;
    }
 
</style>

<div id="tabulu"> <table><thead><tr><th>Feature Name</th><th>Feature ID </th><th>Platform</th><th>Version Number</th><th>Checklist 1.1</th><th>Checklist 1.2</th><th>Checklist 1.3</th><th>Additional Information</th></tr></thead><tbody><tr><td>AutoTest</td><td>REL0012</td><td>Web Application</td><td>1.2</td><td>Name: AutoTest Points
SubFeature Unique ID: Auto001
Possible Risk ID: RISK_Auto_001
Test Case Description: This test is for testing the flow
Steps to proceed: Step1- Open RF
Step2- Run RF
Step3- Exit RF
Pre-Requisite: RF Needed
Post-Requisite: Successful execution of the test
Inputs: bla bla bla
Expected Output: output-bla  bla
Test: High
Comment: No Comment</td><td>Name: 
SubFeature Unique ID: 
Possible Risk ID: 
Test Case Description: 
Steps to proceed: 
Pre-Requisite: 
Post-Requisite: 
Inputs: 
Expected Output: 
Test: 
Comment:</td><td>Name: 
SubFeature Unique ID: 
Possible Risk ID: 
Test Case Description: 
Steps to proceed: 
Pre-Requisite: 
Post-Requisite: 
Inputs: 
Expected Output: 
Test: 
Comment:</td><td>Additional Description Additional Description</td></tr></tbody></table> </div>

I don't think I fully understand the problem. There is a table with just one thead and one tbody - as it should be. And the th cells are at the top of the columns of their respective tds cells, as they should be. What is it that needs to change? — A Haworth, Aug 06 '21 at 15:59
Hi @AHaworth, thanks for the reply. If you run the Code Snippet and scroll down, you can see the problem. — Manasjyoti Bhuyan, Aug 06 '21 at 16:06
Thanks, I hadn't run the snippet. I suspect you'll have to use Javascript to do a proper transposition. Does the 2021 answer from @johnvkumpf here [link]https://stackoverflow.com/questions/6297591/how-to-invert-transpose-the-rows-and-columns-of-an-html-table/66308509#66308509 help? — A Haworth, Aug 06 '21 at 16:37
Possible to change the html elements from ``, `` etc to `
`s? If so, you could use flexbox https://stackoverflow.com/a/45060437/9731999 — Rickmakeitquick, Aug 06 '21 at 21:28

Alohci · Accepted Answer · 2021-08-06T21:56:46.323

display:grid is your friend.

To make the ths and tds the grid items, set the tbody, thead and tr elements to display:contents.

Allocate two columns with grid-template-columns:auto auto;

and set the auto flow order to columns first with grid-auto-flow:column;, and specify that the the th elements get filled in the first column, and the td elements into the second column with grid-column:.

#tabulu table {
  display:grid;
  grid-template-columns:auto auto;
  grid-auto-flow:column;
}
#tabulu thead, #tabulu tbody, #tabulu tr {
  display:contents;
}
#tabulu td {
  grid-column:2;
  padding:8px;
  border: 1px solid black;
  border-collapse: collapse;
  /*multiline wrap*/
  white-space:pre-wrap; 
}
#tabulu th {
  grid-column:1;
  text-align: left;
  padding:8px;
  border: 1px solid black;
  border-collapse: collapse;
  background-color: #808080; color: white;
}

<div id="tabulu"> <table><thead><tr><th>Feature Name</th><th>Feature ID </th><th>Platform</th><th>Version Number</th><th>Checklist 1.1</th><th>Checklist 1.2</th><th>Checklist 1.3</th><th>Additional Information</th></tr></thead><tbody><tr><td>AutoTest</td><td>REL0012</td><td>Web Application</td><td>1.2</td><td>Name: AutoTest Points
SubFeature Unique ID: Auto001
Possible Risk ID: RISK_Auto_001
Test Case Description: This test is for testing the flow
Steps to proceed: Step1- Open RF
Step2- Run RF
Step3- Exit RF
Pre-Requisite: RF Needed
Post-Requisite: Successful execution of the test
Inputs: bla bla bla
Expected Output: output-bla  bla
Test: High
Comment: No Comment</td><td>Name: 
SubFeature Unique ID: 
Possible Risk ID: 
Test Case Description: 
Steps to proceed: 
Pre-Requisite: 
Post-Requisite: 
Inputs: 
Expected Output: 
Test: 
Comment:</td><td>Name: 
SubFeature Unique ID: 
Possible Risk ID: 
Test Case Description: 
Steps to proceed: 
Pre-Requisite: 
Post-Requisite: 
Inputs: 
Expected Output: 
Test: 
Comment:</td><td>Additional Description Additional Description</td></tr></tbody></table> </div>

Thank you very much. That is what I was looking for. Really appreciate your help — Manasjyoti Bhuyan, Aug 09 '21 at 10:19

Resize thead height with respect to tbody height using CSS

1 Answers1