/    Sign up×
Community /Pin to ProfileBookmark

firefox: when a table is adjusted(display:inline), background-color disappears

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?

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@toicontienNov 10.2005 — 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.
<i>
</i>&lt;style type="text/css" media="screen"&gt;
.tableBox {
margin: 0 auto;
width: 500px;
}

.tableBox table {
width: 500px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="tableBox"&gt;
&lt;table&gt;
.
.
.
&lt;/table&gt;
&lt;/div&gt;
Copy linkTweet thisAlerts:
@decibelauthorNov 10.2005 — 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.
×

Success!

Help @decibel spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...