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

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.

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

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


<!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>


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.

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:


<!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>


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

svendtofte.com - max-width in Internet Explorer

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. :slight_smile: