I am attempting to make an HTML table responsive by setting the two td elements to occupy 100% width on smaller screens. This is what I have so far...
.test1{
background:teal;
text-align:center;
padding:20px;
}
.test2 {
background:tan;
padding:20px;
text-align:center;
}
<table style="width:100%;">
<tr>
<td style="width:300px;" class="test1">Test Content</td>
<td style="width:300px;" class="test2">Test Content</td>
</tr>
</table>
Adjusting the width to 100% hasn't been effective for me. Is there a straightforward way to accomplish this using only CSS? Unfortunately, I don't have control over the generated HTML table.
Is it feasible to apply flexbox styling to a table?