My goal is to adjust the size and alignment of the header components within the thead section of an HTML table to match those of a nested table.
The main table handles the alternating row colors, while the nested table enables me to organize the fields across multiple rows.
https://i.sstatic.net/vFCXr.png
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3835352e292e283b2a1a6f746b746a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<table class="table table-striped table-sm">
<thead>
<tr>
<th>Project</th>
<th>Date</th>
<th>Starting</th>
<th>Ending</th>
<th>+/-</th>
<th>Duration</th>
<th>Rate</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="9">
<form method="post" action="/edit">
<table>
<tbody>
<tr>
<td><input type="text" class="form-control form-control-sm" placeholder="Project"></td>
<td><input type="date" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="time" class="form-control form-control-sm"></td>
<td><input type="number" step="0.25" class="form-control form-control-sm"></td>
<td><input type="number" class="form-control form-control-sm" disabled=""></td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<div class="input-group">
<span class="input-group-text"><i class="fas fa-dollar-sign"></i></span>
<input disabled="" type="number" class="form-control form-control-sm">
</div>
</td>
<td>
<button type="submit" class="btn btn-outline-primary btn-sm">Save</button>
<a href="/delete" role="button" class="btn btn-outline-danger btn-sm">Delete</a>
</td>
</tr>
<tr>
<td colspan="8">
<input type="text" class="form-control form-control-sm" placeholder="Notes">
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</tbody>
</table>I attempted to apply column classes (class="col-sm-4") to both the header and detail rows, but it didn't yield satisfactory results.
View the Fiddle.