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

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

70
google-chrome html safari scaling

8 ответов

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

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

84

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

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

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

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

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

31

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

table-layout: fixed

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

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

25

оберните внутреннюю таблицу с div и установите max-width для этого обертывания div.

8

у меня была та же проблема. Я использовал таблицу как средство для центра моего контента на странице, но safari игнорировал width:100%; max-width:1200px в качестве стиля я применил к таблице. Я узнал, что если я оберну таблицу в div и установлю левое и правое поля на auto на div, он будет центрироваться на странице и подчиняться атрибутам max и min width в safari и firefox на mac. Мне еще нужно проверить explorer или chrome в 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">
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 с неопределенным. Поэтому любое поведение является CSS2.1-совместимый; новые спецификации CSS могут определить это поведение, поэтому веб-разработчикам не следует полагаться на конкретный."

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

1

я смог исправить свою проблему с медиа-запросом:

Я заменил 

max-width: 360px

С

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

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

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

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

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

0