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 {
}
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With