Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

The html table width just out of control in Firefox and IE [closed]

I should build this with div, but I have to use table for my client (dummy user). So I build this html table with CSS which works perfect in Chrome.

I have read some related topics but just didn't get the key trick! hope someone tell me the wrong.

Here is my CSS, and I have jsfiddle demo here (Only works in Chrome) Please check the jsfiddle demo in Chrome first, then try Firefox and you see what I meant.

#content_container {
    width:960px;
}
#content_container .fullcontainer > table {
    border-bottom: 4px solid #222;
}
#content_container .fullcontainer {
width:inherit !important;
margin: 0 auto !important;
padding: inherit !important;
}
#content_container table.eurostyle {
    margin: 25px auto !important;
    border-collapse: collapse !important;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    text-shadow: 1px 1px 1px #eee;
}
table td img.alignleft {
margin: 0;
}
body h2 {
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-weight: bold;
}
.eachtop {
    border-top: 4px solid #222;
    border-color: #000;
}
.eachaside {
    border-top: 1px solid #222;
    border-top: 1px solid #ccc;
    font-size: 12px;
}
table td {

}
table h2 {
    margin: 2px 0;
    line-height: 1.1em;
    font-size: 22px;
}
.eachtop > td:first-child {
/*height: 40px;*/
padding: 3px 0;
}
.tdfit {
    padding: 0 0 0 1px;
    line-height: 0;
}
.ctable {
    margin: 0 0 0 0px;
}
.ctable td img, .tdfit img {
    max-width: 100%;
    height: auto;
}
.ctable td {
    padding: 1px;
    border: 1px solid #000000;
    border-top: none;
    border-bottom: none;
    line-height: 0.9;
}
.ctable td img {

        }
like image 318
bard Avatar asked Dec 08 '22 06:12

bard


1 Answers

Add table-layout: fixed to your table and your issue will be resolved.

From CSS-Tricks:

Things get a lot sturdier and more predictable with property/value in place. The layout is fixed based on the first row. Set the width of those, and the rest of the table follows.

What this means is that instead of the content of the table determining the width, the style on the first row of the table will now determine the width of the rest of the rows below, which makes the layout more, you guessed it, fixed!

Working example (tested Firefox):

http://jsfiddle.net/gt5t01ov/2/

like image 62
What have you tried Avatar answered Dec 11 '22 08:12

What have you tried