SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to center two tables on the same line using CSS?

    Hello! I have two tables that are on the same line and if the size of the browser is contracted enough, the right table moves down to the next line, which is what I want. Where I'm stuck is: how do you center these two tables? If both tables are on the same line, there should be roughly 33% space on both sides. And if the second table is on the next line, the two tables should be right in the middle of the page. Here is my code:

    Code:
    <html>
    <head>
    <style type="text/css">
    #outerdiv {
    border: 1px solid blue; 
    }
    .t 
    { 
    border: 1px solid red;
    margin: 1em;
    float: left;
    }
    
    table { 
    border: 1px solid black;
    border-collapse: collapse;
    margin: 1em;
    }
    
    table tr td,
    table tr th { 
    border: 1px solid black;
    border-collapse: collapse;
    }
    
    .left { text-align: left; }
    .right { text-align: right; }
    
    .clearit {
    clear: left;
    }
    </style>
    </head>
    <body>
    <p>Two tables, side by side, centered together within the page. But if the page is not wide enough, the second table will move on to the next line, and will be centered there instead.</p>
    <div id="outerdiv">
    <div class="t">
    <table> 
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td class="left">January</td>
    <td class="right">$100</td>
    </tr>
    </table> 
    </div>
    <div class="t">
    <table>
    <tr>
    <th>Month</th>
    <th>Savings</th>
    </tr>
    <tr>
    <td class="left">February</td>
    <td class="right">$200</td>
    </tr>
    </table>
    </div>
    <div class="clearit">End report</div>
    </div>
    </body>
    </html>
    How do I fix this?

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    How do I fix this?
    Hi,
    For IE8+ and all other modern browsers you can use display:inline-table along with text-align center on the parent.

    Then reset the text-align on the tables. By doing this you can eliminate the extra two divs you are using.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test Page</title>
    
    <style type="text/css">
    #outerdiv {
        border: 1px solid blue;
        text-align: center;
    }
    table {
        display: inline-table;
        margin: 1em;
        border: 1px solid black;
        border-collapse: collapse;
        text-align: left;
    }
    table tr td, table tr th {
        border: 1px solid black;
        border-collapse: collapse;
    }
    .left {
        text-align: left;
    }
    .right {
        text-align: right;
    }
    
    </style>
    </head>
    <body>
    
    <p>Two tables, side by side, centered together within the page. But if the page is not wide enough, 
    the second table will move on to the next line, and will be centered there instead.
    </p>
    <div id="outerdiv">
        <table>  
            <tr>
                <th>Month
                </th>
                <th>Savings
                </th>
            </tr>
            <tr>
                <td class="left">January</td>
                <td class="right">$100</td>
            </tr>
        </table>  
        <table>
            <tr>
                <th>Month
                </th>
                <th>Savings
                </th>
            </tr>
            <tr>
                <td class="left">February</td>
                <td class="right">$200</td>
            </tr>
        </table>
        <p>End report</p>
    </div>
    
    </body>
    </html>

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Change <div id="outerdiv"> to <div class="outerdiv"> ( only because I felt the use of an ID was kinda heavy handed here and you may want to have other DIVs containing centered tables elsewhere in your HTML doc. You can probably remove the class="left" from table cells as that the default alignment for the table.

    This CSS adds more backwards support for IE.
    Code:
    body{text-align: center}
    .outerdiv{                /* this for rally old IE ;  do not merge  with the other .outerdiv declaration!!*/
                 display:inline;
                 zoom:1;
    }
    .outerdiv {
        border: 1px solid blue;
        text-align: center;
        display: -moz-inline-box;
        display: inline-block;
    }
    table {
        margin: 1em;
        float: left;
        border: 1px solid black;
        border-collapse: collapse;
    }
    table+table{margin-left:0;}
    table tr td, table tr th {
        border: 1px solid black;
        border-collapse: collapse;
    }
    .left, table{
        text-align: left;
    }
    .right {
        text-align: right;
    }
    /* optional,to stop other text in outer div from centering by default
    	.outerdiv {text-align: left;}
    */

    This should handle two tables in IE5+ and two or more (just as Rayzurs does) in IE7+


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
  •