Hi. Im using firefox. i need to center a table in a div, so i set the display:inline, however i have a background-color:#ccccc in the same table, and the bgcolor is gone when i change the display, anyone know why this happens?I've noticed this behavior before too and was never quite sure why. I think it has to do with the TABLE tag no longer set as table display. TRs and TDs cannot be directly inside a non table element. Even though your tag is TABLE, the display: inline tells the document object model it isn't a table.
text-align:center will only center inline content, hence the reason you want an inline table. What you really want is auto left and right margins. That's all you should need to do is set the left and right margins of the TABLE tag to auto.
Safari doesn't center tables using auto left and right margins. This is a bug. Usually what works best cross browser is to give the table a width and give it a left margin to center it. Even better, give the table a width. Then place it inside a DIV tag, give that a width, and set the DIV tag's left and right margins to auto.
<style type="text/css" media="screen">
.tableBox {
margin: 0 auto;
width: 500px;
}
.tableBox table {
width: 500px;
}
</style>
</head>
<body>
<div class="tableBox">
<table>
.
.
.
</table>
</div>thanks dude, i now understand margin:auto thanks to you. i had seen it, but not sure how to implement if before now. I should have realized that when chaging display "roles" on a table, its not a table anymore, hence, no bgcolor. thanks.
text-align:center will only center inline content, hence the reason you want an inline table. What you really want is auto left and right margins. That's all you should need to do is set the left and right margins of the TABLE tag to auto.
Safari doesn't center tables using auto left and right margins. This is a bug. Usually what works best cross browser is to give the table a width and give it a left margin to center it. Even better, give the table a width. Then place it inside a DIV tag, give that a width, and set the DIV tag's left and right margins to auto.
<style type="text/css" media="screen">
.tableBox {
margin: 0 auto;
width: 500px;
}
.tableBox table {
width: 500px;
}
</style>
</head>
<body>
<div class="tableBox">
<table>
.
.
.
</table>
</div>thanks dude, i now understand margin:auto thanks to you. i had seen it, but not sure how to implement if before now. I should have realized that when chaging display "roles" on a table, its not a table anymore, hence, no bgcolor. thanks.