Show table columns below to each other for small displays (responsive layout)

I have a table with two columns:

-------------
| A | B |
-------------

I browser width is too small for this layout, it should switch to this layout:

-------------
| A |
-------------
| B |
-------------

I got this to work with fixed column width and "float: left":

<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="width: 300px; float: left; border: 1px solid black;">This is column 1</td>
            <td style="width: 300px; float: left; border: 1px solid black;">This is column 2</td>
        </tr>
    </tbody>
</table>

      

        
        
        
      

    

However, I want the column widths to be "50%" using all the available space and specifying the "minimum width" in pixel, tried this:

<table style="width: 100%;">
    <tbody>
        <tr>
            <td style="width: 50%; min-width: 200px; float: left; border: 1px solid black;">This is column 1</td>
            <td style="width: 50%; min-width: 200px; float: left; border: 1px solid black;">This is column 2</td>
        </tr>
    </tbody>
</table>

      

        
        
        
      

    

However, this immediately places the columns underneath each other, although there is enough room to fit them next to each other. What could I have done instead?