Блог

Главная - Вопросы по программированию - Разная ширина столбца таблицы в Chrome и Firefox

Разная ширина столбца таблицы в Chrome и Firefox

#css #html-table #width #padding

#css #html-таблица #ширина #заполнение

Вопрос:

 <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>

и

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

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

потому что первый столбец имеет 200 10 10 = ширина 220 пикселей в Firefox, но 180 10 10 =200 пикселей в Chrome и Safari. Я думаю width , что не следует включать padding , так что Firefox прав? Но в любом случае, как я могу установить одинаковую ширину столбца в разных браузерах?

Редактировать: инструменты разработчика Chrome выглядят так: введите описание изображения здесь

Комментарии:

1. Я вижу это как 200 пикселей даже в Chrome! Какую версию браузера вы используете? Я знаю, что в Chrome для «украшения» он, как правило, добавляет дополнительные дополнения к некоторым компонентам, таким как textarea и т. Д., По умолчанию. Вы явно переопределили их.

Ответ №1:

Убедитесь, что у вас указан современный doctype, поскольку я не вижу описанного поведения с моей стороны. Например, используйте <!DOCTYPE html> , чтобы сообщить браузерам, что это HTML5. Для меня первый столбец составляет 200 пикселей отступы в Firefox, Chrome и Safari.