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

У меня есть 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" для внутренней таблицы, и это как-то работает.

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

Ответы

Ответ 1

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

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

Ответ 2

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

spec (CSS 3 spec для CSS Intrinsic и Extrinsic Sizing относится к спецификации CSS 2.1 по этому правилу) четко заявляет:

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

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

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

Ответ 3

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

table-layout: fixed

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

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

Я только наткнулся на этот ответ, и стоит отметить, что согласно 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 с undefined. Поэтому любое поведение соответствует CSS2.1, но более новые спецификации CSS могут определять это поведение, поэтому веб-разработчикам не следует полагаться на конкретный один сейчас".

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

Ответ 7

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

Я заменил

max-width: 360px

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

Ответ 8

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

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

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

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