div inside table row not expanding 100% - html

Question

I am appending a div in a table after table row,Its is not expending 100%,but always stick to first td.
<div style="width:100%;border:1px solid red;height:30px;">Test Div</div>
Note: i can place my div inside td by using colspan,but i have dynamic no of table columns,so i think i can't use colspan
Can you guys have please look at this ?

Answer 1

Logically you can not append DIV in between rows of table. If you want to have a div having 100% of width then use colspan property on TD and then add div in it.
Below is example as per your table structure, you need to have a new row as shown below instead of only DIV :
<tr>
<td colspan=6>
<div style="width:100%;border:1px solid red;height:30px;">Test Div</div>
</td>
</tr>

Answer 2

As pointed out by Nishesh Pratap, the right way to do it is to add dynamic colspan value.
But if you really want to go the CSS way only, you can play with the white-space rule. It will allow your text to overflow above the next TDs.
Keep in mind that this rule will also allow the text to overflow outside the table.
.forbidWrap{
white-space: nowrap;
border: 1px solid blue;
display: inline-block;
}
table{
table-layout: fixed;
width: 600px;
border-collapse: collapse;
text-align: left;
position: relative;
}
th{
background-color: #666;
color: white;
}
td{
border-bottom: 1px solid #ccc;
}
<table>
<tr>
<th>head</th>
<th>head</th>
<th>head</th>
<th>head</th>
</tr>
<tr>
<td>
<div class="forbidWrap">
The content of this div will overflow on other columns
</div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7282</td>
<td>782</td>
<td>785</td>
<td>1589</td>
</tr>
</table>