HTML table responsive 100% width

Question

I am trying to make a simple HTML table responsive by giving the 2 tds 100% width at smaller screen sizes, I have this 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>

I have tried changing the width to 100% but that isn't working for me, what is the easiest way of doing this in CSS only? I have no control over the HTML table that is generated.

Can I apply flexbox styling to a table?

Answer 1

you can use media query then change your width screen size

.test1 {
        background: teal;
        text-align: center;
        padding: 20px;
    }

    .test2 {
        background: tan;
        padding: 20px;
        text-align: center;
    }

    @media (max-width: 700px) {

        .test1, .test2 {
            width: 100% !important;
            float: left;
        }
    }

<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>

so when width screen max 700px then

and when more then 700px then

you can add more media query as your requirement .

For more information

https://www.w3schools.com/css/css_rwd_mediaqueries.asp