How to create Responsive HTML, CSS table? - html

Question

I want to create a responsive table only with HTML & CSS that has a icon button aligned to right side when on responsive view as similar to the bellow image. The bellow code renders a responsive table, however the icon is also aligned on the next line. I want it to be aligned on right side as in image. any one Please help on this.
table {
border: 1px solid #ccc;
border-radius: 5px;
/* border-collapse: collapse; */
margin: 0;
padding: 0;
width: 50%;
table-layout: fixed;
}
table tr {
background-color: white;
border: 1px solid #ddd;
padding: 10px;
}
table th,
table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
table th {
font-size: 15px;
text-transform: uppercase;
}
#media screen and (max-width: 600px) {
table {
border: 0;
width: 100%
}
table thead {
border: none;
/* clip: rect(0 0 0 0); */
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 1px solid #ddd;
display: block;
/* margin-bottom: .625em; */
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: 13px;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Upload Date</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Name">John</td>
<td data-label="Type">file</td>
<td data-label="Upload Date">21/04/20</td>
<td class="dropdown">
<p><a id="" class="ti-more-alt"></a></p>
<div class="dropdown-content">
View
</div>
</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Type">file</td>
<td data-label="Upload Date">21/04/20</td>
<td class="dropdown">
<p><a id="" class="ti-more-alt"></a></p>
<div class="dropdown-content">
View
</div>
</td>
</tr>
<tr>
<td data-label="Name">John</td>
<td data-label="Type">file</td>
<td data-label="Upload Date">21/04/20</td>
<td class="dropdown">
<p><a id="" class="ti-more-alt"></a></p>
<div class="dropdown-content">
View
</div>
</td>
</tr>
</tbody>
</table>