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

**MrSnrub** · Sep 4, 2012 07:00

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?

**Rayzur** · Sep 4, 2012 11:26

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>

**dresden_phoenix** · Sep 5, 2012 13:04

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+

User Tag List

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

Thread Tools

Display

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

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions