html table line-height,html - Setting table row height - Stack Overflow

function row_expand_collapse(e){

//get table id so you know what table to manipulate row from

const tableID = e.parentNode.parentNode.id;

//get row index and increment by 1 so you know what row to expand/collapse

const i = e.rowIndex + 1;

//get the row to change the css class on

let row = document.getElementById(tableID).rows[i]

// Add and remove the appropriate css classname to expand/collapse the row

if (row.classList.contains('row-collapse')){

row.classList.remove('row-collapse')

row.classList.add('row-expand')

return

}

if (row.classList.contains('row-expand')){

row.classList.remove('row-expand')

row.classList.add('row-collapse')

return

}

}

.row-collapse td{

padding: 0px 0px;

line-height: 0px;

white-space: nowrap;

overflow: hidden;

transition-duration: .75s;

}

.row-expand td {

line-height: 100%;

transition-duration: .75s;

}

table, th, td{

width: 75%;

border: 1px solid black;

border-collapse: collapse;

padding: 15px 15px;

margin: 15px 15px;

text-align: center;

}

TABLE 1

Row 1 - Click Me to See Row 2Row 2Row 3 - Click Me to See Row 4Row 4

TABLE 2

Row 1 - Click Me to See Row 2Row 2Row 3 - Click Me to See Row 4Row 4