Chrome, Safari игнорируя максимальную ширину в таблице - PullRequest
Новая
       14

Chrome, Safari игнорируя максимальную ширину в таблице

72 голосов
/ 26 октября 2010

У меня есть такой HTML-код: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
    <title></title> 
    </head> 

    <body> 
       <table style="width:100%;"> 
          <tr> 
             <td> 
                <table style="width:100%; max-width:1000px; background:#000099;"> 
                       <tr> 
                           <td> 
                               001 
                           </td> 
                       </tr> 
                   </table> 
               </td> 
           </tr> 
       </table> 
    </body> 
    </html>

Проблема в том, что Chrome и Safari игнорируют "max-width:1000px" Мой друг обнаружил, что мы можем предотвратить это, добавив "display:block" для внутреннеготаблица, и она как-то работает.

Итак, я хочу знать: есть ли другие способы решения этой проблемы и почему это происходит?

Ответы [ 8 ]

86 голосов
/ 26 октября 2010

Макс. Ширина применяется к элементам блока . <table> не является ни блоком , ни встроенным . Достаточно двусмысленно? ха-ха. Вы можете использовать display:block; max-width:1000px и забыть о width:100%. Chrome и Safari следуют правилам!

Изменить Май 2017: обратите внимание, этот комментарий был сделан 7 лет назад (в 2010 году!). Я подозреваю, что браузеры изменились за эти годы (я не знаю, я больше не занимаюсь веб-дизайном). Я рекомендую использовать более новое решение.

31 голосов
/ 20 января 2013

Я знаю, что на этот вопрос ответили некоторое время и с рабочим обходным путем, но ответ о том, что max-width применяется только к элементам блока, и цитирование источника, который не является спецификацией, полностью неверен.

Спецификация (спецификация CSS 3 для внутреннего и внешнего размера CSS относится к спецификации CSS 2.1 по этому правилу) четко гласит:

все элементы, кроме незаменяемых встроенных элементов, строк таблицы и групп строк

, что означает, что оно должно применяться к элементам таблицы.

Это означает, что поведение WebKit по поводу несоблюдения max-width или min-width для элементов таблицы некорректно.

25 голосов
/ 10 июля 2014

Я думаю, что вы ищете здесь: 

table-layout: fixed

Примените этот стиль к таблице, и ваша таблица будет соответствовать ширине, назначенной вам.

Примечание: Применение этого стиля непосредственно в Chrome будет выглядеть так, как будто оно не работает.Вам нужно применить стиль в вашем файле CSS / HTML и обновить страницу.

8 голосов
/ 20 апреля 2012

Оберните внутреннюю таблицу div и установите максимальную ширину для этого div

6 голосов
/ 21 июня 2012

У меня была такая же проблема.Я использовал таблицу как средство для центрирования своего контента на странице, но сафари игнорировал width:100%; max-width:1200px как стиль, который я применил к таблице.Я узнал, что если я оберну таблицу в div и установлю левые и правые поля на auto на div, она будет центрироваться на странице и подчиняться атрибутам max и min width в safari и firefox на mac.Мне еще предстоит проверить проводник или хром на windows.Вот пример: 

<div style="position:relative; width:100%; max-width:1200px; min-width:800px; margin-left:auto; margin-right:auto">

Затем я вложил таблицу в div ... 

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
1 голос
/ 20 февраля 2015

Я только что наткнулся на этот ответ, и стоит отметить, что согласно MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/max-width), их таблица совместимости для max-width гласит: 

|             Feature  | Chrome        | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
--------------------------------------------------------------------------------------------------------
|applies to <table> [1]| Not supported | (Yes)           | Not supported     | (Yes) | Not supported   |

"[1] CSS 2.1 явно оставляет поведение max-width с неопределенным. Поэтому любое поведение совместимо с CSS2.1; более новые спецификации CSS могут определять это поведение, поэтому веб-разработчики не должны полагаться на конкретное . "

Хотя в MDN есть несколько интересных вещей, таких как "fill-available" и "fit-content" - у нас есть кое-какие вещи, на которые стоит рассчитывать, когда спецификация стабилизируется и будет явной в этом отношении ...

0 голосов
/ 09 февраля 2016

Вот однозначная ссылка: 10 Детали модели визуального форматирования (w3.org)

В CSS 2.1 влияние 'min-width' и 'max-width' на таблицы , встроенные таблицы, ячейки таблицы, столбцы таблицы и группы столбцов не определено .

Ссылки, приведенные ранее в этой теме, ошибочно читают «строки таблицы» как «таблицу». Этот, однако, действительно говорит «таблица». Это часть CSS2, но CSS3 относится к CSS2 за основу max-width.

Так что это просто неопределенно, и браузер может свободно делать то, что он хочет, и на него небезопасно полагаться.

0 голосов
/ 22 октября 2013

Мне удалось исправить проблему с медиа-запросом:

я заменил 

max-width: 360px

с 

@media (min-width: 440px) {
    width: 360px;
}
...