Put an extra cell in a table without an attached column - html

Question

I am trying to add an extra table cell to a table, that isn't attached to a column. It just sticks out of the table like a 'bump' I not entirely sure what kind of styling I would need to achieve this.
What I would like it to look like this:
My code:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td style="border-style:none">extra</td>
</tr>
</table>
I would think I need to add an empty <th> and remove the border from it and then add it to the last cells in the table?

Answer 1

I think you want to do like below:
table{
border-collapse: collapse;
border-spacing: 0;
}
table tr td:last-child{
border: none;
}
table td, table th{
border: 1px #666 solid;
}
table tr:last-child td:last-child{
border: 1px #666 solid;
}
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<td></td>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td></td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>extra</td>
</tr>
</table>

Answer 2

With javascript, you can do it like (of course you would change nth-child(3) to your target column):
var row = document.createElement('td')
row.innerHTML = 'teste'
document.querySelector('table tr:nth-child(3)').append(row)
<table id="test">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td style="border-style:none">extra</td>
</tr>
</table>