How to make this table structure responsive

Question

I'm trying to get a resposive table with a % and not hard coded pixel values, but the column in which I want to place the image gets very small when I resize the window.

HTML:

<TABLE BORDER=1 style="width: 90%; margin: 5%;">
    <TR>
        <TD width="70%">
            <h4>ABOUT US</h4>
            <p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
            content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
            content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
            </p>
            <p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
            <br/><br/><br/><br/><br/>
        </TD>
        <TD width="30%" rowspan=2><img src="images/foto.jpeg"></TD>
    </TR>
    <TR>
        <TD>
            <h4>MEET THE TEAM</h4>
            <p>content</p>
        </TD>
</TABLE>

jsFiddle

Is there any way to do this so that the table resize in such manner that the column 2 becomes row 3? If I would have to do the same thing using divs I would by okay with that.

Answer 1

Here's a simple rule when it comes to responsive web design (or any web design in general)...

Never

Ever

Ever

... Use tables to define the layout of a page. Tables are designed to present tabular data not to define the layout of a page. Use div elements instead

A useful link to bear in mind is http://shouldiusetablesforlayout.com/.

Answer 2

Tables shouldn't be used for layout (as @davblayn pointed out), but if you want/need to use them:

HTML:

<TABLE BORDER=1 style="width: 90%; margin: 5%;">
    <TR>
        <TD id='firstItem' width="70%">
            <h4>ABOUT US</h4>
            <p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
            content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent 
            content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
            </p>
            <p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
            <br/><br/><br/><br/><br/>
        </TD>
        <TD width="30%" id='responsiveItem' rowspan=2><img src="images/foto.jpeg"></TD>
    </TR>
    <TR>
        <TD>
            <h4>MEET THE TEAM</h4>
            <p>content</p>
        </TD>
</TABLE>

CSS:

@media all and (max-width: 699px) and (min-width: 520px) {
    td{
        width:100%;
    }
    #firstItem{
        display:block;
    }
    #responsiveItem{
        float:left;
    }
}

jsFiddle

Play with resizing the JSFiddle window, the column with the image drops down to become a row when there isn't enough room.