CODEWITHSUNDEEP
htmlcssfirefoxwidthcss-tables
Scott Bonner
Scott Bonner

Reputation: 2980

Firefox table css generate tbody killing table width

I am working on taking an IE only site and making it cross browser. Everything is looking good in IE, Chrome, and Safari. However Firefox isn't happy.

I have a table class called "datatable" it is as the name suggests a datatable. I am trying to get it to stretch to 100% of width of the div it's contained in. The div above is 100%. When I use firebug to check it, the table is stretching to 100%. However, the tbody that Firefox generated is not stretching to 100%. So because of that the rows in the table are as small as the tbody. So I have no idea how to fix this. I tried tbody{width:100%;} and it did nothing.

Any ideas I would greatly appreciate it.

Upvotes: 3

Views: 8198

Answers (5)

l2aelba
l2aelba

Reputation: 22147

If some browsers need display:block in <table> so ...

table {
    // Something..
    display: block;
}
body:not(:-moz-handler-blocked) table {
    display: table;
}

Example case : HTML in e-mails

Just a bit hack if you still need to preview on Firefox

Upvotes: 0

ATOzTOA
ATOzTOA

Reputation: 35950

Check to see if you have font-size set to something lesser than 100%.

Upvotes: 0

Amir
Amir

Reputation: 79

I had the same issue, solved it eventually by setting the width property of the header cells (i figured that's what firefox looks at to decide the tbody width).

table.table_class th { width: 115px; }

it's an option if, like me, you don't want to mess with generic css.

Upvotes: 0

Scott Bonner
Scott Bonner

Reputation: 2980

Okay I just answered my question... inside the css there was a generic css like this...

table
{
    border:0px solid #000000;
    padding:0 0 0 0;
    border-collapse:collapse;
    border-spacing:0;
    display:block;
}

I removed the display:block and everything works great now... I had looked for that on the table.datatable definition, but did think to look for a generic one in the file...

Upvotes: 11

MrGrigg
MrGrigg

Reputation: 1732

This might be silly, but make sure you're selecting the tbody correctly

#datatable tbody{width:100%}

Upvotes: 1

Related Questions