Lai Yu-Hsuan
Lai Yu-Hsuan

Reputation: 28081

Different table column width in Chrome and Firefox

<table class="schedule">
   <thead>
     <tr>
       <th id="first-column">#</th>
       <th>Monday</th>
       <th>Tuesday</th>
       <th>Wednesday</th>
       <th>Thursday</th>
       <th>Friday</th>
       <th>Saturday</th>
     </tr>
    </thead>
</table>

and

table.schedule { 
  table-layout: fixed;
  width: 900;
}

#first-column {
  width: 200px;
  padding: 0 10px;
}

cause the first column has 200+10+10=220px width in Firefox, but 180+10+10=200px in Chrome and Safari. I think the width shouldn't include padding, so Firefox is right? But anyway, how can I set the same column width across browsers?

Edit: the Chrome Developer Tools look like: enter image description here

Upvotes: 1

Views: 3739

Answers (1)

inkredibl
inkredibl

Reputation: 1993

Make sure you have a modern doctype specified as I'm not seeing the described behaviour on my end. For example use <!DOCTYPE html> to tell the browsers it's HTML5. For me the first column is 200px + padding on Firefox, Chrome and Safari.

Upvotes: 1

Related Questions