Creating columns inside a column - html

Question

This is the picture of what the output should look like:
I want to create something like this (see the attached photo). But I can't do the same thing. I already tried using div and table tags.
This is what I've been doing
<table class="table table-bordered">
<thead>
<tr>
<th class="col-xs-1">ProjectID</th>
<th>Program/Project</th>
<th class="col-xs-1">Office/Unit</th>
<th class="col-xs-1">General Description</th>
<th class="col-xs-1">Methods</th>
<th> Schedule/Milestone
<table>
<tr>
<td class="col-xs-1">Jan</td>
<td class="col-xs-1">Feb</td>
<td class="col-xs-1">Mar</td>
<td class="col-xs-1">Apr</td>
<td class="col-xs-1">May</td>
<td class="col-xs-1">Jun</td>
<td class="col-xs-1">Jul</td>
<td class="col-xs-1">Aug</td>
<td class="col-xs-1">Sep</td>
<td class="col-xs-1">Oct</td>
<td class="col-xs-1">Nov</td>
<td class="col-xs-1">Dec</td>
</tr>
</table>
</th>
<th class="col-xs-1">Source of funds</th>
<th class="col-xs-1">Approved Budget Ceiling (ABC)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Empty</td>
<td>Empty</td>
<td>Empty</td>
<td>Empty</td>
<td>Empty</td>
<td>
<!-- THIS IS WHERE I CAN'T GET IT RIGHT -->
<table>
<tr>
<td class="col-xs-1">1</td>
<td class="col-xs-1">2</td>
<td class="col-xs-1"> 3</td>
<td class="col-xs-1"> 4</td>
<td class="col-xs-1"> 5</td>
<td class="col-xs-1"> 6</td>
<td class="col-xs-1"> 7</td>
<td class="col-xs-1"> 8</td>
<td class="col-xs-1"> 9</td>
<td class="col-xs-1"> 10</td>
<td class="col-xs-1"> 11</td>
<td class="col-xs-1"> 12</td>
</tr>
</table>
</td>
<td>Empty</td>
<td>Empty</td>
</tr>
</tbody>
</table>
But the output of this code looks like this:
I am using bootstrap to create my website.

Answer 1

What you're trying to do isn't really possible, because you are breaking up the table structure in two. This means that each cell in the 2nd table (1,2,3..) is going to have the width of its' contents and won't be affected by the width of the header cells (Jan, Feb, Mar...).
This is why you're seeing this.
One way to fix this is by applying table-layout: fixed on both tables, and then giving each td a fixed width and the display: inline-block property.
.milestone-table {
table-layout: fixed;
width: 390px; /*optional*/
}
.milestone-table td {
width: 30px;
display: inline-block;
}
Demo