SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Location
    Coimbatore- India
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,789
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    do you want overflow:hidden or overflow:scroll on the table?
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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>

  4. #4
    SitePoint Addict
    Join Date
    Aug 2008
    Location
    Coimbatore- India
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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>

  6. #6
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    max-width is probably what you're looking for. It works on tables too.

    svendtofte.com - max-width in Internet Explorer

  7. #7
    SitePoint Addict
    Join Date
    Aug 2008
    Location
    Coimbatore- India
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •