Control the width of a table that is greater than the width of the div outside it?

**sTyleSHA** · Mar 23, 2011 00:32

Hi,
Is there any possible solution for the below scenario.

wrapper div 960px ie., (fixed width)
table inside wrapper 1500px (or of any greater width than the wrapper div)

In the above scenario, even if I pasted the content, (images, text etc.,) the width of the table must not get expanded to 1500 px but must be within the wrapper div, so that the layout stays perfect..

Even solution for controlling div inside div, table inside table wrt the above issue is appreciated.

Please advice.

**felgall** · Mar 23, 2011 02:20

do you want overflow:hidden or overflow:scroll on the table?

**Paul O'B** · Mar 23, 2011 03:08

Hi,

It's unclear the exact dynamics of what you want and as Stephen suggests above the alternatives are either to hide the overflow or to add a scrollbar to the div so the table can scroll.

You can set a width on the table and use table-layout fixed but that will cause overlapping of the content.

e.g.example of all three methods

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1, h2 {
    margin:10px 0;
    text-align:center;
}
div {
    width:960px;
    border:10px solid red;
    overflow:hidden;
    margin:10px auto 35px;
}
table {
    width:1500px;
}
td {
    border:1px solid #000
}
.test1 {
    overflow:auto
}
.test2 {
    overflow:hidden
}
.test3 table {
    width:960px;
    table-layout:fixed
}
</style>
</head>
<body>
<h1>Table test</h1>
<h2>overflow:auto</h2>
<div class="test1">
    <table>
        <tr>
            <td>a</td>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
            <td>a</td>
        </tr>
    </table>
</div>
<h2>overflow:hidden</h2>
<div class="test2">
    <table>
        <tr>
            <td>a</td>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
            <td>a</td>
        </tr>
        <tr>
            <td>a</td>
            <td>a</td>
        </tr>
    </table>
</div>
<h2>table-layout:fixed and a fixed width on table (content overlaps)</h2>
<div class="test3">
    <table>
        <tr>
            <td>1aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>2aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>3aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        </tr>
        <tr>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        </tr>
        <tr>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        </tr>
    </table>
</div>
</body>
</html>

**sTyleSHA** · Mar 23, 2011 03:08

Originally Posted by felgall

do you want overflow:hidden or overflow:scroll on the table?

Hi, Thanks for your response.

Overflow:hidden wont help me as it doesnt show the full image in case if the user pasted some high resolution image.

Overflow:scroll - will resemble as if the content is pasted inside an iframe.

Any other solutions,,even if the high resolution images appears shrinked its fine for now- but all (images, content) must fit inside the outer div width.

**Paul O'B** · Mar 23, 2011 03:29

Hi,

You'll need to show a demo that exhibits the problem you are talking about.

If something is too big to fit then you can't just make it fit. You would need to script that in some way.

It is possible to set the max-width of images in your table to stop them getting too big.

table img {max-width:300px!important}

It all depends how many cells you have and whether each may have an image in them etc.

e.g. for a one cell table:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
h1, h2 {
    margin:10px 0;
    text-align:center;
}
div {
    width:960px;
    border:10px solid red;
    margin:10px auto 35px;
}
table {
    width:1500px;
    padding:0;
    border-spacing:0;
}
td {
    padding:0
}
table img {
    max-width:960px!important;
    display:block
}
</style>
</head>
<body>
<h1>Table test</h1>
<div class="test1">
    <table>
        <tr>
            <td><img src="img.jpg" width="1300"  alt="test" /></td>
       </tr>
    </table>
</div>
</body>
</html>

**noonnope** · Mar 23, 2011 03:55

max-width is probably what you're looking for. It works on tables too.

svendtofte.com - max-width in Internet Explorer

**sTyleSHA** · Mar 24, 2011 00:55

Originally Posted by Paul O'B

Hi,

You'll need to show a demo that exhibits the problem you are talking about.

[/code]

This is acutally going to get implemented in simple cms, where the client could update the images and text by using fck editor. Thanks for your 3 methods paul. Will try to implement your solution in the projects and let you know in case of any issues.

Please do have an eye on this thread.

User Tag List

Thread: Control the width of a table that is greater than the width of the div outside it?

Thread Tools

Display

Control the width of a table that is greater than the width of the div outside it?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions