CODEWITHSUNDEEP
htmlresponsive-design
Prateek
Prateek

Reputation: 4013

How to make this table structure responsive

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.

Upvotes: 2

Views: 9216

Answers (4)

1andsock
1andsock

Reputation: 1567

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.

Upvotes: 6

user2109908
user2109908

Reputation:

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

Upvotes: 13

Dmytro
Dmytro

Reputation: 5213

If by "responsive" you mean does not go screwy when text does not fit, and maintains image size (images do not scale nicely), then you can use this:

    <table border="1" width="800px" height="250" style="min-width:800px; width: 90%; margin: 5%;">
      <tr> 
        <td>
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
        </td>
        <td style="height: 250px; width: 250px;" rowspan="2">CONTENT</td>
      </tr>
      <tr> 
        <td>
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
        </td>
      </tr>
    </table>

Basically, you need to set minimum space to accomodate the content, then you can scale outwards as much as you want.

While yes, tables are generally frowned upon, it is another form of "WHY WOULD YOU WANT TO DO THAT" and since the question particularly asks for tables, there is no need to completely change the question to satisfy your pet peeve.

Tables work fine for websites, the main issue with them is that they take a while to set up, and once they are set up, they stay that way forever, and changing them is impossible without total re-tabling.

This does not appear to the main issue here.

Upvotes: 0

imsky
imsky

Reputation: 3279

Don't use tables for layout. You can't easily do what you want with CSS anyway, since you'd have to override the display property for multiple elements.

Upvotes: 2

Related Questions