Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cool DIV with fixed width in TD with colspan

    My code:

    Code:
    <table style="width: 500px;">
            <tr>
                <td colspan="5">
                    <div style="width: 500px;">colspan_5</div>
                </td>              
            </tr>
            <tr>
                <td colspan="1">
                    <div style="width: 100px;">colspan_1</div>
                </td> 
                <td colspan="3">
                    <div style="width: 300px;">colspan_3</div>
                </td>                
                <td colspan="1"> 
                    <div style="width: 100px;">colspan_1</div>
                </td>               
            </tr>  
            <tr>
                <td colspan="2">
                    <div style="width: 200px;">colspan_2</div>
                </td> 
                <td colspan="3">
                    <div style="width: 300px;">colspan_3</div>
                </td>                
            </tr> 
            <tr>
                <td colspan="5">
                    <div style="width: 500px;">colspan_5</div>
                </td>                                
            </tr> 
    </table>​
    But result looks wrong. (jsfiddle_example)

    How can I fix it?

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    You need to set the width to your TR not just the div inside of it
    Although i do no recommend creating a site like this, with tables or inline css.

  • #3
    Regular Coder
    Join Date
    Dec 2010
    Posts
    423
    Thanks
    22
    Thanked 56 Times in 56 Posts
    I mean the width of your TD not TR - sorry about the confusion

  • Users who have thanked aaronhockey_09 for this post:

    see613 (10-14-2012)

  • #4
    New to the CF scene
    Join Date
    Oct 2012
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This table is simplified example for jQuery widget.
    Your changes works correctly only in Chrome.
    http://jsfiddle.net/uDwa4/10
    May be something else?


  •  

    Tags for this Thread

    Posting Permissions

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