Here is the link to my JSBin: https://jsbin.com/xofaco/edit?html,css,output
I am facing an issue with an HTML table that has both nested headers and regular headers. My goal is to make all headers equal in height, specifically I want columns labeled "four, five, six" to match the height of the "Admissions" nested header.
I have tried a solution where I used empty <th></th> elements with borders to create the illusion of equal height, but that is not the ideal approach for me.
The code snippet below demonstrates my current setup. Feel free to review the JSBin link provided above for more context or let me know if additional information is required.
table {
border: 1px solid black;
}
th, td, tr {
border: 1px solid black;
}
.one {
border: 1px solid red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="table-wrapper table-wrapper--no-scroll table-wrapper--row-header-border table-wrapper--no-cell-wrapping">
<table>
<thead>
<tr>
<td rowspan="2"> </td>
<th colspan="3" scope="colgroup" class="table-wrapper--no-top-border">Admissions Top Heading</th>
</tr>
<tr>
<th scope-"col" class="table-wrapper--no-top-border">one</th>
<th scope-"col" class="table-wrapper--no-top-border">two</th>
<th scope-"col" class="table-wrapper--no-top-border">three</th>
<th scope-"col" class="one">four</th>
<th scope-"col" class="one">five</th>
<th scope-"col" class="one">six</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">March 2016</th>
<td>###</td>
<td>###</td>
<td>###</td>
<td>###</td>
<td>###</td>
<td>###</td>
</tr>
<tr>
<th scope="row">April 2016</th>
<td>###</td>
<td>###</td>
<td>###</td>
<td>###</td>
<td>###</td>
<td>##&t;/td>
</tr>
<tr>
<th scope="row">May 2016</th>
<td>###</td>
<td>###</td>
<td>###</td>
<td>###</td>
<td>###</td>
<td>###</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>