Results 1 to 7 of 7

Thread: How to place tables side by side

  1. #1
    Join Date
    Aug 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to place tables side by side

    Dear Team,

    I am looking for some help on placing the tables side by side(parallel -- the size of the table(s) is dynamic.
    The table borders should be self contained within the tables.
    Thanks..
    Attached Files Attached Files
    Last edited by jscheuer1; 08-20-2016 at 02:32 PM.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,880
    Thanks
    49
    Thanked 265 Times in 257 Posts
    Blog Entries
    56

  3. #3
    Join Date
    Aug 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Place the inline-block as below but still tables come one below the other.

    table, td { border-width: 1px; border-style: solid; border-collapse: collapse; padding: 10px; color: #000000; text-align: left; float: left; display: inline-block}

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    Are you setting the width of each table? Try 50% each - maybe a bit less (47%?) to accommodate the extra padding. Or apply global box-sizing so that the extra padding is absorbed into the box model. * { box-sizing:border-box }

    But also remove table {display: inline-block} because it adds extra whitespace and isn't needed on floated block-level elements (you're already floating the tables)
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  5. #5
    Join Date
    Aug 2016
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    updated the table definition as below
    [icode]
    table, td { border-width: 1px; border-style: solid; border-collapse: collapse; padding: 10px; color: #000000; text-align: left; float: left; box-sizing:border-box}
    Also included the table width to 47% for all the tables.. but still the table goes 1 below the other.
    ] <table border='1' width=47% style="float: left" box-sizing:border-box>

  6. #6
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    To be honest, this would all be much easier if you give us a link to your actual web page. The file you've provided includes a lot of server-side code which means that it needs to be cleaned-up a lot before we can focus on the pertinent HTML and CSS. I can't be bother to do that - I'm not sure that anyone else can be bothered to do that either. And thanks to those PHP variables, we can only guess at the content, which makes life even more difficult for us because the content of the cells will determine table layout, unless measures are put in place to counteract the effect of the content, but we wont know that until we can see what it is you're working with. We only need to see the served page. If you link us to a live demo life becomes much easier because we can make live edits in the browser (dev toolbar) rather than trying to mentally filter out all the XML, echo's and variables, and imagine what the table contains. The guessing process that we've gone through so far is too much effort for us. If you want help, you need to make it easier for us to give it to you.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  7. #7
    Join Date
    Nov 2014
    Location
    On A Scottish Island
    Posts
    488
    Thanks
    0
    Thanked 62 Times in 58 Posts

    Default

    There are several errors in your test file above. For example the lines 84-87 read as follows:

    Code:
            <tr><th class='titulo' colspan='2'>Password Expiry Information </td>
            <tr><th class='titulo'>Local Account Details</td>
            <th class='titulo'>Expiry Date </td>
            </tr>" >> $DIR/html_test.xls
    You have two opening <th> tags which are closed with </td> tags. This is incorrect. You also have two opening <tr> tags but only one matching </tr> tag. It might be worth fixing the errors first.

Similar Threads

  1. Smooth Navigational Menu (v1.5) want to display as dropline side by side
    By jqdesigner in forum Dynamic Drive scripts help
    Replies: 19
    Last Post: 01-30-2013, 03:35 PM
  2. Replies: 6
    Last Post: 07-16-2012, 12:03 PM
  3. Replies: 1
    Last Post: 04-09-2012, 05:23 PM
  4. Replies: 3
    Last Post: 07-24-2011, 06:59 AM
  5. Anyway to make Scrollable Content II go side to side instead of up and down?
    By Jolaedana in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-27-2007, 05:14 PM

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
  •