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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts

    Multiple tables on one line

    I wish to display multiple tables on one line, next to each other. This could be achieved using tables, but I want to avoid this is possible:

    PHP Code:
    <table>
      <
    tr>
        <
    td>
          <
    table>
            <!--
    Table data-->
          </
    table>
        </
    td>
        <
    td>
          <
    table>
            <!--
    Table data-->
          </
    table>
        </
    td>
        <
    td>
          <
    table>
            <!--
    Table data-->
          </
    table>
        </
    td>
      </
    tr>
    </
    table
    I considered using display:inline, but the tables are bordered, and this caused display issues with the border as they only bordered one line.

    Is there a solution to this problem using CSS? If it matters, the tables are within a DIV. In one case, there are two tables I wish to go alongside one another, in another, there are three.

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    For the border you may want to look at using border-collapse:collapse on the table.

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Tried that, it messed up the cells and for some of the tables the border was still just bordering one line, although in others it was bordering the whole thing - with messed up cells passing over the edges of the border.

  • #4
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Why not try floats?

    Just give each individual table a set width, then use css to float 'em left?

    As long as your width values are correct, the tables should stack neatly side by side.

    Kind regards,

    Gary

  • #5
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    So something like:

    Code:
    <table style="width:33%;float:left">
    <!--Content-->
    <table style="width:50px;float:left">
    <!--Content-->
    <table style="width:30px;float:left">
    EDIT: That doesn't seem to work.
    Last edited by name _F1; 10-01-2006 at 02:14 AM.

  • #6
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Can anyone help?


  •  

    Posting Permissions

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