Not all my html elements inside div truncated - css

Question

I want to truncate some text and a table using CSS. For some reason the table is not truncated with the ellipsis. Only the text of the first sentence is correctly truncated.
.truncate {
width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="truncate">When you visit our site, pre-selected companies may access and use certain information on your device and about this site to serve relevant ads or personalized content..
<table>
<thead>
<tr>
<th>Location</th>
<th>Modified</th>
<th>Type</th>
<th>File Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Location</td>
<td>Modified</td>
<td>Type</td>
<td>File Name</td>
</tr>
<tr>
<td>Location</td>
<td>Modified</td>
<td>Type</td>
<td>File Name</td>
</tr>
<tr>
<td>Location</td>
<td>Modified</td>
<td>Type</td>
<td>File Name</td>
</tr>
<tr>
<td>Location</td>
<td>Modified</td>
<td>Type</td>
<td>File Name</td>
</tr>
<tr>
<td>Location</td>
<td>Modified</td>
<td>Type</td>
<td>File Name</td>
</tr>
<tr>
<td>Location</td>
<td>Modified</td>
<td>Type</td>
<td>File Name</td>
</tr>
<tr>
<td>Location</td>
<td>Modified</td>
<td>Type</td>
<td>File Name</td>
</tr>
</tbody>
</table>
</div>