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"
для внутренней таблице, и это как-то работает.
Итак, что я хочу знать - есть ли другие способы решения этой проблемы и почему это происходит?
8 ответов
Max-width применяется к элементы блока. <table>
ни блок , ни inline. Достаточно двусмысленно? хаха. Вы можете использовать display:block; max-width:1000px
и забудь о width:100%
. Chrome и Safari следуют правилам!
Edit May 2017: обратите внимание, что этот комментарий был сделан 7 лет назад (в 2010 году!). Я подозреваю, что браузеры изменились за эти годы (я бы не знал, я больше не занимаюсь веб-дизайном). Я рекомендую использовать более поздний решение.
Я знаю, что на это был дан ответ на некоторое время и с обходным путем, но ответ, заявляющий, что max-width
применяется только к элементам блока и цитирование источника, который не является спецификацией, совершенно неверно.
на spec (the CSS 3 spec для CSS Intrinsic & Extrinsic Sizing ссылается на спецификацию CSS 2.1 по этому правилу) ясно заявляет:
все элементы, но не замененные встроенные элементы, строки таблицы и строки группы
что означало бы, что он должен применяться к элементам таблицы.
это означает, что поведение WebKit не уважает max-width
или min-width
на элементах таблицы неверно.
Я думаю, что вы ищете здесь:
table-layout: fixed
примените этот стиль к таблице, и ваша таблица будет уважать ширину, которую вы ей назначаете.
Примечание: применение этого стиля непосредственно в Chrome
будет выглядеть так, как будто он не работает. Вам нужно применить стиль в вашем CSS / HTML
файл и обновить страницу.
у меня была та же проблема. Я использовал таблицу как средство для центра моего контента на странице, но 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">
Я только что наткнулся на этот ответ, и стоит отметить, что согласно 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 " -у нас есть некоторые вещи, которые мы с нетерпением ждем, когда спецификация стабилизируется и будет явной на этом фронте...
я смог исправить свою проблему с медиа-запросом:
Я заменил
max-width: 360px
С
@media (min-width: 440px) {
width: 360px;
}
вот однозначная ссылка:10 детали модели визуального форматирования (w3.org)
в CSS 2.1 эффект "min-width" и "max-width"таблицы встроенные таблицы, ячейки таблицы, столбцов таблиц и групп столбцов неопределено.
ссылки, приведенные ранее в этом потоке, ошибочно читаются "строки таблицы "как"таблица". Этот, однако, действительно говорит "стол". Это часть CSS2, но CSS3 относится к CSS2 для основы max-width
.
Так что это просто неопределенно, и браузер свободен делать то, что они хотят, и небезопасно полагаться на него.