I have two tables on a page that I want to display side by side, and then center them within the page (actually within another div, but this is the simplest I could come up with):
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
<div id="outer">
<p>Two tables, side by side, centered together within the page.</p>
<div id="inner">
<div class="t">
<table>
<tr><th>a</th><th>b</th></tr>
<tr><td>1</td><td>2</td></tr>
<tr><td>4</td><td>9</td></tr>
<tr><td>16</td><td>25</td></tr>
</table>
</div>
<div class="t">
<table>
<tr><th>a</th><th>b</th><th>c</th></tr>
<tr><td>1</td><td>2</td><td>2</td></tr>
<tr><td>3</td><td>5</td><td>15</td></tr>
<tr><td>8</td><td>13</td><td>104</td></tr>
</table>
</div>
</div>
<div id="clearit">all done.</div>
</div>
I understand that it's something to do with the fact that the tables are floated, but I'm at a loss as to understand what I'm missing. There are many web pages that describe something like the technique I show here, but in any event it doesn't work; the tables cling stubbornly to the left hand margin.
Unfortunately, all of these solutions rely on specifying a fixed width. Since the tables are generated dynamically (statistical results pulled from a database), the width can not be known in advance.
The desired result can be achieved by wrapping the two tables within another table:
<table align="center"><tr><td>
//code for table on the left
</td><td>
//code for table on the right
</td></tr></table>
and the result is a perfectly centered pair of tables that responds fluidly to arbitrary widths and page (re)sizes (and the align="center" table attribute could be hoisted out into an outer div with margin autos).
I conclude that there are some layouts that can only be achieved with tables.
The problem is that you need to give #inner a set width (anything but auto or inherit). The margin: 0 auto; trick only works if the inner element is narrower than its container element. Without being given a width, #inner is automatically expanding to the full width of #outer, which causes its contents to be flush left.
The problem is that the DIV that should center your tables has no width defined. By default, DIVs are block elements and take up the entire width of their parent - in this case the entire document (propagating through the #outer DIV), so the automatic margin style has no effect.
For this technique to work, you simply have to set the width of the div that has margin:auto to anything but "auto" or "inherit" (either a fixed pixel value or a percentage).
<style>
#outer { text-align: center; }
#inner { width:500px; text-align: left; margin: 0 auto; }
.t { float: left; width:240px; border: 1px solid black;}
#clearit { clear: both; }
</style>
I realize this is an ancient question, but here goes anyway.
The following will work in compliant browsers and IE8 in standards mode (i.e. with a doctype set).
#inner {text-align:center;}
.t {display:inline-block;}
Unfortunately, there's really no way to tweak it to work in IE6. For IE7, adding a zoom:1 to the .t divs (via a conditional comment) might help, but I don't have IE7 available for testing at the moment.
Unfortunately, all of these solutions rely on specifying a fixed width. Since the tables are generated dynamically (statistical results pulled from a database), the width can not be known in advance.
The desired result can be achieved by wrapping the two tables within another table:
<table align="center"><tr><td>
//code for table on the left
</td><td>
//code for table on the right
</td></tr></table>
and the result is a perfectly centered pair of tables that responds fluidly to arbitrary widths and page (re)sizes (and the align="center" table attribute could be hoisted out into an outer div with margin autos).
I conclude that there are some layouts that can only be achieved with tables.
If it was me - I would do with the table something like this:
<style type="text/css" media="screen">_x000D_
table {_x000D_
border: 1px solid black;_x000D_
float: left;_x000D_
width: 148px;_x000D_
}_x000D_
_x000D_
#table_container {_x000D_
width: 300px;_x000D_
margin: 0 auto;_x000D_
}_x000D_
</style>_x000D_
_x000D_
<div id="table_container">_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>9</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>16</td>_x000D_
<td>25</td>_x000D_
</tr>_x000D_
</table>_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>9</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>16</td>_x000D_
<td>25</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>I found I could solve this by simply putting the two side by side tables inside of a third table that was centered. Here is the code
I added two lines of code at the top and bottom of the two existing tables
<style>_x000D_
#outer {_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
#inner {_x000D_
text-align: left;_x000D_
margin: 0 auto;_x000D_
}_x000D_
_x000D_
.t {_x000D_
float: left;_x000D_
}_x000D_
_x000D_
table {_x000D_
border: 1px solid black;_x000D_
}_x000D_
_x000D_
#clearit {_x000D_
clear: left;_x000D_
}_x000D_
</style>_x000D_
_x000D_
<div id="outer">_x000D_
_x000D_
<p>Two tables, side by side, centered together within the page.</p>_x000D_
_x000D_
<div id="inner">_x000D_
<table style="margin-left: auto; margin-right: auto;">_x000D_
<td>_x000D_
<div class="t">_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>9</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>16</td>_x000D_
<td>25</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
_x000D_
<div class="t">_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
<th>c</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>3</td>_x000D_
<td>5</td>_x000D_
<td>15</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>8</td>_x000D_
<td>13</td>_x000D_
<td>104</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
</td>_x000D_
</table>_x000D_
</div>_x000D_
<div id="clearit">all done.</div>_x000D_
</div>Give your inner div a width.
EXAMPLE
Change your CSS:
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
To this:
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; width:500px }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
Unfortunately, all of these solutions rely on specifying a fixed width. Since the tables are generated dynamically (statistical results pulled from a database), the width can not be known in advance.
The desired result can be achieved by wrapping the two tables within another table:
<table align="center"><tr><td>
//code for table on the left
</td><td>
//code for table on the right
</td></tr></table>
and the result is a perfectly centered pair of tables that responds fluidly to arbitrary widths and page (re)sizes (and the align="center" table attribute could be hoisted out into an outer div with margin autos).
I conclude that there are some layouts that can only be achieved with tables.
The problem is that the DIV that should center your tables has no width defined. By default, DIVs are block elements and take up the entire width of their parent - in this case the entire document (propagating through the #outer DIV), so the automatic margin style has no effect.
For this technique to work, you simply have to set the width of the div that has margin:auto to anything but "auto" or "inherit" (either a fixed pixel value or a percentage).
<style>
#outer { text-align: center; }
#inner { width:500px; text-align: left; margin: 0 auto; }
.t { float: left; width:240px; border: 1px solid black;}
#clearit { clear: both; }
</style>
If it was me - I would do with the table something like this:
<style type="text/css" media="screen">_x000D_
table {_x000D_
border: 1px solid black;_x000D_
float: left;_x000D_
width: 148px;_x000D_
}_x000D_
_x000D_
#table_container {_x000D_
width: 300px;_x000D_
margin: 0 auto;_x000D_
}_x000D_
</style>_x000D_
_x000D_
<div id="table_container">_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>9</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>16</td>_x000D_
<td>25</td>_x000D_
</tr>_x000D_
</table>_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>9</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>16</td>_x000D_
<td>25</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>Off the top of my head, you might try using the "margin: 0 auto" for #outer rather than #inner.
I often add background-color to my DIVs to see how they're laying out on the view. That might be a good way to diagnose what's going onn here.
Give your inner div a width.
EXAMPLE
Change your CSS:
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
To this:
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; width:500px }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
<style>
#outer { text-align: center; }
#inner { width:500px; text-align: left; margin: 0 auto; }
.t { float: left; width:240px; border: 1px solid black;}
#clearit { clear: both; }
</style>
The problem is that you need to give #inner a set width (anything but auto or inherit). The margin: 0 auto; trick only works if the inner element is narrower than its container element. Without being given a width, #inner is automatically expanding to the full width of #outer, which causes its contents to be flush left.
Give your inner div a width.
EXAMPLE
Change your CSS:
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
To this:
<style>
#outer { text-align: center; }
#inner { text-align: left; margin: 0 auto; width:500px }
.t { float: left; }
table { border: 1px solid black; }
#clearit { clear: left; }
</style>
Unfortunately, all of these solutions rely on specifying a fixed width. Since the tables are generated dynamically (statistical results pulled from a database), the width can not be known in advance.
The desired result can be achieved by wrapping the two tables within another table:
<table align="center"><tr><td>
//code for table on the left
</td><td>
//code for table on the right
</td></tr></table>
and the result is a perfectly centered pair of tables that responds fluidly to arbitrary widths and page (re)sizes (and the align="center" table attribute could be hoisted out into an outer div with margin autos).
I conclude that there are some layouts that can only be achieved with tables.
If it was me - I would do with the table something like this:
<style type="text/css" media="screen">_x000D_
table {_x000D_
border: 1px solid black;_x000D_
float: left;_x000D_
width: 148px;_x000D_
}_x000D_
_x000D_
#table_container {_x000D_
width: 300px;_x000D_
margin: 0 auto;_x000D_
}_x000D_
</style>_x000D_
_x000D_
<div id="table_container">_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>9</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>16</td>_x000D_
<td>25</td>_x000D_
</tr>_x000D_
</table>_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>9</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>16</td>_x000D_
<td>25</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>The problem is that you need to give #inner a set width (anything but auto or inherit). The margin: 0 auto; trick only works if the inner element is narrower than its container element. Without being given a width, #inner is automatically expanding to the full width of #outer, which causes its contents to be flush left.
<style>
#outer { text-align: center; }
#inner { width:500px; text-align: left; margin: 0 auto; }
.t { float: left; width:240px; border: 1px solid black;}
#clearit { clear: both; }
</style>
Off the top of my head, you might try using the "margin: 0 auto" for #outer rather than #inner.
I often add background-color to my DIVs to see how they're laying out on the view. That might be a good way to diagnose what's going onn here.
I have provided two solutions. Pick up which one best suits for you.
Solution#1:
<html>_x000D_
<style>_x000D_
#container {_x000D_
width: 50%;_x000D_
margin: auto;_x000D_
text-align: center;_x000D_
}_x000D_
#first {_x000D_
width:48%;_x000D_
float: left;_x000D_
height: 200px;_x000D_
background-color: blue;_x000D_
}_x000D_
#second {_x000D_
width: 48%;_x000D_
float: left;_x000D_
height: 200px;_x000D_
background-color: green;_x000D_
}_x000D_
#clear {_x000D_
clear: both;_x000D_
}_x000D_
#space{_x000D_
width: 4%;_x000D_
float: left;_x000D_
height: 200px;_x000D_
}_x000D_
table{_x000D_
border: 1px solid black;_x000D_
margin: 0 auto;_x000D_
table-layout:fixed;_x000D_
width:100%;_x000D_
text-align:center;_x000D_
}_x000D_
</style>_x000D_
<body>_x000D_
_x000D_
<div id = "container" >_x000D_
<div id="first">_x000D_
<table>_x000D_
<tr>_x000D_
<th>Column1</th>_x000D_
<th>Column2</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Value1</td>_x000D_
<td>Value2</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
<div id = "space" >_x000D_
</div>_x000D_
<div id = "second" >_x000D_
<table>_x000D_
<tr>_x000D_
<th>Column1</th>_x000D_
<th>Column2</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Value1</td>_x000D_
<td>Value2</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
<div id = "clear" ></div>_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>Solution#2:
<html>_x000D_
<style>_x000D_
#container {_x000D_
margin:0 auto;_x000D_
text-align: center;_x000D_
}_x000D_
#first {_x000D_
float: left;_x000D_
}_x000D_
#second {_x000D_
float: left;_x000D_
}_x000D_
#clear {_x000D_
clear: both;_x000D_
}_x000D_
#space{_x000D_
width:20px;_x000D_
height:20px;_x000D_
float: left;_x000D_
}_x000D_
.table, .table th, .table td{_x000D_
border: 1px solid black;_x000D_
}_x000D_
</style>_x000D_
<body>_x000D_
_x000D_
<table id = "container" >_x000D_
<td>_x000D_
<div id="first">_x000D_
<table class="table">_x000D_
<tr>_x000D_
<th>Column1</th>_x000D_
<th>Column2</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Value1</td>_x000D_
<td>Value2</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
<div id = "space" >_x000D_
</div>_x000D_
<div id = "second" >_x000D_
<table class="table">_x000D_
<tr>_x000D_
<th>Column1</th>_x000D_
<th>Column2</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>Value1</td>_x000D_
<td>Value2</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
<div id = "clear" ></div>_x000D_
</div>_x000D_
</td>_x000D_
</table>_x000D_
</body>_x000D_
</html>Note: Change the width percentage as per your need in 1st solution.
Off the top of my head, you might try using the "margin: 0 auto" for #outer rather than #inner.
I often add background-color to my DIVs to see how they're laying out on the view. That might be a good way to diagnose what's going onn here.
The problem is that the DIV that should center your tables has no width defined. By default, DIVs are block elements and take up the entire width of their parent - in this case the entire document (propagating through the #outer DIV), so the automatic margin style has no effect.
For this technique to work, you simply have to set the width of the div that has margin:auto to anything but "auto" or "inherit" (either a fixed pixel value or a percentage).
I realize this is an ancient question, but here goes anyway.
The following will work in compliant browsers and IE8 in standards mode (i.e. with a doctype set).
#inner {text-align:center;}
.t {display:inline-block;}
Unfortunately, there's really no way to tweak it to work in IE6. For IE7, adding a zoom:1 to the .t divs (via a conditional comment) might help, but I don't have IE7 available for testing at the moment.
If it was me - I would do with the table something like this:
<style type="text/css" media="screen">_x000D_
table {_x000D_
border: 1px solid black;_x000D_
float: left;_x000D_
width: 148px;_x000D_
}_x000D_
_x000D_
#table_container {_x000D_
width: 300px;_x000D_
margin: 0 auto;_x000D_
}_x000D_
</style>_x000D_
_x000D_
<div id="table_container">_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>9</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>16</td>_x000D_
<td>25</td>_x000D_
</tr>_x000D_
</table>_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>9</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>16</td>_x000D_
<td>25</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>The problem is that you need to give #inner a set width (anything but auto or inherit). The margin: 0 auto; trick only works if the inner element is narrower than its container element. Without being given a width, #inner is automatically expanding to the full width of #outer, which causes its contents to be flush left.
The problem is that the DIV that should center your tables has no width defined. By default, DIVs are block elements and take up the entire width of their parent - in this case the entire document (propagating through the #outer DIV), so the automatic margin style has no effect.
For this technique to work, you simply have to set the width of the div that has margin:auto to anything but "auto" or "inherit" (either a fixed pixel value or a percentage).
I found I could solve this by simply putting the two side by side tables inside of a third table that was centered. Here is the code
I added two lines of code at the top and bottom of the two existing tables
<style>_x000D_
#outer {_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
#inner {_x000D_
text-align: left;_x000D_
margin: 0 auto;_x000D_
}_x000D_
_x000D_
.t {_x000D_
float: left;_x000D_
}_x000D_
_x000D_
table {_x000D_
border: 1px solid black;_x000D_
}_x000D_
_x000D_
#clearit {_x000D_
clear: left;_x000D_
}_x000D_
</style>_x000D_
_x000D_
<div id="outer">_x000D_
_x000D_
<p>Two tables, side by side, centered together within the page.</p>_x000D_
_x000D_
<div id="inner">_x000D_
<table style="margin-left: auto; margin-right: auto;">_x000D_
<td>_x000D_
<div class="t">_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>4</td>_x000D_
<td>9</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>16</td>_x000D_
<td>25</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
_x000D_
<div class="t">_x000D_
<table>_x000D_
<tr>_x000D_
<th>a</th>_x000D_
<th>b</th>_x000D_
<th>c</th>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>1</td>_x000D_
<td>2</td>_x000D_
<td>2</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>3</td>_x000D_
<td>5</td>_x000D_
<td>15</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>8</td>_x000D_
<td>13</td>_x000D_
<td>104</td>_x000D_
</tr>_x000D_
</table>_x000D_
</div>_x000D_
</td>_x000D_
</table>_x000D_
</div>_x000D_
<div id="clearit">all done.</div>_x000D_
</div>Source: Stackoverflow.com