CSS table styling - special format - css

Question

I need a table styling like below, where the milestone label is displayed without any spacing with the table content itself wile on the right of it I have a couple of additional information displayed in cells with spacing between them and below content.
divs can work as well.

Answer 1

You can create the cells at the top right as seperate tables with position: absolute and make the cell under those (the top right of the large table, spanning several columns) invisible as shown below.
table {
border-collapse: collapse;
border: none;
}
th,
td {
border: 1px solid blue;
padding: 15px 20px;
}
th {
background: #ccc;
border: 1px solid red;
}
.head1 {
background: #aaa;
border-color: green;
}
.nohead {
display: none;
}
table.t1 {
margin-top: 20px;
}
table.t2 {
position: absolute;
right: 180px;
top: 10px;
}
.t2 td {
padding: 2px 15px;
width: 50px;
text-align: center;
border-color: orange;
}
<table class="t1">
<tr>
<td colspan="3" class="head1">The main header</td>
<td colspan="4" class="nohead">nothing to see</td>
</tr>
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
<th>Cell 3</th>
<th>Cell 4</th>
<th>Cell 5</th>
<th>Cell 6</th>
<th>Cell 7</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
<td>Cell 7</td>
</tr>
</table>
<table class="t2">
<tr>
<td>A1</td>
<td>A2</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
</tr>
</table>