16

I have an html table within a div of a specific size. I want the table to apply margin collapse and be 100% wide. Here is my code. It renders how I want it to in IE8 and incorrectly in Firefox. Firefox may be doing the spec correctly, but whatever. How do I fix my css to work in both browsers?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<style type="text/css">
table
{
    border-collapse: collapse;
    border-spacing: 0;
}

table
{
    margin: 10px 0;
    width: 100%;
    display: block;
}

p
{
    margin: 10px 0;
}

td, th
{
    border: 1px solid #000000;
}

</style>
</head>

<body>

<div style="width: 600px; border: 1px purple solid;">

<p>Some text at the top.  Notice that the margin collapse does not work unless display:block.</p>

<table>
    <tr>
        <th></th>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
    </tr>
    <tr>
        <td>Label 1</td>
        <td>1.A</td>
        <td>1.B</td>
        <td>1.c</td>
    </tr>
    <tr>
        <td>Label 2</td>
        <td>2.A</td>
        <td>2.B</td>
        <td>2.c</td>
    </tr>
</table>

<p>Some text at the bottom.  Notice that the margin collapse does not work unless display:block.  Its stupid.</p>


</div>

</body>

</html>

I need the display:block for margin collapsing to work in Firefox. If you remove the display:block, you should notice that the spacing between the <p> tags widens from 10px to 20px.

This is also an edit to this question that I posted earlier, but it won't let me edit for some reason. I've been messing around with my internet cache so I probably messed up a cookie.

Community
  • 1
  • 1
Maggie
  • 171
  • 1
  • 1
  • 5

10 Answers10

31

You need to add table-layout: fixed to the style assigned to the table, that's all.

Paul Phillips
  • 1,480
  • 1
  • 15
  • 23
  • I actually had a div set to `display: table;` which was not honouring the `width:100%;` in Firefox and this fixed it. Thank you – junkystu Jan 29 '15 at 19:35
19

Use display: table and your problem will be solved.

Chuck Norris
  • 15,207
  • 15
  • 92
  • 123
Egemen Mede
  • 191
  • 3
  • This was driving me nuts — I had some javascript that was toggling the display of items and it was forcing between "none" and "block", which of course messed up my TABLE display. – ElBel Aug 28 '13 at 17:48
  • Almost drove me nuts too. I am using with bootstrap which may be causing this issue – Onimusha Jul 09 '14 at 22:27
  • this works well with `with: 100%`. Is there something that also works with `max-width: 100%`? – nbar Nov 23 '18 at 14:34
7

just remove the display: block;, the border-collapse works fine

y34h
  • 1,631
  • 1
  • 11
  • 17
7

remove

display: block;

change this 

table
{
    margin: 10px 0;
    width: 100%;
    display: block;
}

to

table
{
    margin: 10px 0;
    width: 100%;
}

for live demo

Margin collapsing is only defined for block elements.

Tables are special. In the CSS specs, they're not quite block elements - special rules apply to size and position, both of their children (obviously), and of the table element itself.

check links

Solution to margin collapsing is

You could use a 1-pixel top padding or border to avoid margins from collapsing.

Pramendra Gupta
  • 14,667
  • 4
  • 33
  • 34
  • Margin collapse doesn't work in firefox. The margin to the top and bottom of table adds with the p instead of collapsing to 10px. – Maggie Sep 28 '10 at 05:24
  • @maggie Margin collapsing is only defined for block elements, i have update post check once again. – Pramendra Gupta Sep 28 '10 at 05:31
  • I want margin collapsing on the table, therefore I defined it as a block element. Should I be doing something else to achieve the same effect? I'm using display:block based on similar reasoning to this post: http://stackoverflow.com/questions/136727/why-doesnt-a-tables-margin-collapse-with-an-adjacent-p – Maggie Sep 28 '10 at 05:34
  • @maggie "You could use a 1-pixel top padding or border to avoid margins from collapsing." – Pramendra Gupta Sep 28 '10 at 05:37
  • I want margins to collapse. As in if there is a `

    ` with a 10 px margin-bottom and a table next with a 10px margin-top, I only want there to be a 10px space, not 20px. Am i using the term margin collapsing write.

     – Maggie Sep 28 '10 at 05:52
3

Okay, this is my first post on Stack Overflow, and I believe I have solved your issue. All I did was change the line "display: block;" to "position: relative;" and that seemed to have fixed the "stretching" issue.

I am using Chromium and I understood what you mean when the tables weren't stretching out as they were in Internet Explorer. I know Chromium and Firefox handle pages pretty similar, so that might have resolved your issue.

1

You can fix any width trouble simply by adding a short JScritp ... first add this to your BODY tag: onload="autoadjustw"; and this little script in the head tag:

function autoadjustw(){
   AN=document.getElementById("parent_object").offsetWidth;
   document.getElementById("Table_Id").style.width=AN+"px";
}
oskar
  • 11
  • 1
1

I'm just wondering.. If you're specifying div width="600" and then require the table to fit 100%.. Why not put a width on the table instead of the containing div.
don't mind me, Just curious to know what specifically you're trying to achieve other than the border-collapse.

Robin Maben
  • 22,194
  • 16
  • 64
  • 99
1

You need to define the parent elements as 100% too, so the table knows what it is a percentage of.

Robimp
  • 704
  • 6
  • 13
  • 29
0

if removing display: block breaks in IE use '\9' to target IE only like:

table 
{ 
    margin: 10px 0; 
    width: 100%; 
    display: block\9; /*for ie only"*/

}
Jamie
  • 1,340
  • 11
  • 22
  • 1
    Thats a good tip to know. In this situation IE renders how I want it to look; whether that's how it should look based on the code, is another story I just don't care about. – Maggie Sep 28 '10 at 05:36
0

Tables do not use display: block; Simple width: 100%; should do the display: block; trick.

Never have, never will!

Kalle H. Väravas
  • 3,579
  • 4
  • 30
  • 47