Dynamic table size html

问题

I'm making a website that has to fit in the entire screen regardless of screen-size. I'm using a table to use this at the moment but I ran into a problem.

The web page is divided into 3 columns: the left column stays at the left of the screen and has a fixed size with a background. the right column stays at the right of the screen and has a fixed size with a background. the middle column should be stretched between his neighbouring cells and should have a background that stretches with it (only horizontally)

This way the web page should always look as it was made for the screen you're using to view the site.

However my problem is the middle cell, the image doesn't repeat, somehow the css code: background-repeat:x-repeat; doesn't make the image stretch, also when I put the cell width on 100% it interferes with his neighbouring cells making it look like a mess.

How can I achieve this?

EDIT

Here is the markup I'm using:

CSS:

#topleftcell
{
    background-image:url(../images/Logo.png);
    background-repeat:no-repeat;
    width:300px;
}
#topmiddlecell
{
    background-image:url(../images/header_fill.png);
    background-repeat:repeat-x;
    width:auto;
}
#toprightcell
{
    background-image:url(../images/header_right.gif);
    background-repeat:no-repeat;
    width:16px;
}

HTML:

<body>
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
 <tr style=" width:100%;">
     <td id="topleftcell"></td>
     <td id="topmiddlecell"></td>
     <td id="toprightcell"></td>
 </tr>
    </table>
</body>

回答1:

fixed width on left and right cell. auto width in center cell. you probably need a filler image in the center cell.

来源：https://stackoverflow.com/questions/1775715/dynamic-table-size-html

标签

html

css

dynamic

background

html-table