Different table column width in Chrome and Firefox

Question

<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: 在此处输入图片说明

Answer 1

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.

Different table column width in Chrome and Firefox

Question

1 answers

solution1
0 2011-10-17 17:59:36

Different table column width in Chrome and Firefox

Question

1 answers

solution1 0 2011-10-17 17:59:36

solution1
0 2011-10-17 17:59:36