Почему максимальная ширина не работает на <table>с в IE7? - PullRequest
Новая
       0

Почему максимальная ширина не работает на <table>с в IE7?

6 голосов
/ 11 августа 2011

Почему «максимальная ширина» не работает с таблицами в Internet Explorer 7? max-width доступен для других элементов и, кажется, работает нормально, но когда он применяется к таблице, я не могу заставить ее что-либо делать, то есть правило max-width просто игнорируется. 

<!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>
    <title>Foo</title>
</head>
<body>
    <div style="background-color: Red; max-width: 1000px;">
        <table style="background-color: Green; max-width: 500px;">

                <tr>
                    <td><a href="#" class="action view">View</a></td>
                    <td>7/20/2011</td>
                    <td>James Smith</td>
                    <td>345 NW 23rd Ave Gainesville, FL 32606</td>
                    <td>Alachua Blah blah sf jfh jsdhjs fjsh djkf sdjkhk</td>
                    <td>345621</td>
                    <td>Fred Smith</td>
                </tr>
        </table>
    </div>
</body>
</html>

В Firefox размер таблицы ограничен 500px, а текст внутри ячеек разбивается соответствующим образом (между словами, как и следовало ожидать). В IE7, однако, все равно, что было применено правило «без переноса». Каждая ячейка растягивается до необходимой с ней, не пытаясь разбить текст внутри ячейки, и вся таблица просто растягивается, игнорируя правило max-width.

Как мне поставить max-width на стол в IE7? (Он отлично работает в Firefox и IE8)

То, что я пробовал, не работает: 

table { display: block; }

td { word-wrap: break-word; }

table { table-layout: fixed; }

Ответы [ 2 ]

11 голосов
/ 11 августа 2011

Свойство max-width, заданное для таблицы, игнорируется браузерами WebKit, и Chrome, и Safari будут отображать таблицу, игнорируя максимальную ширину, как и IE7. Я бы порекомендовал установить свойство max-width для элемента-оболочки, такого как div.

См. http://jsfiddle.net/P5YPR/1/

2 голосов
/ 11 августа 2011

Попробуйте это: 

table#my_table {
    max-width:500px;
    width:expression(document.body.clientWidth > 500? "500px": "auto" );
}

К сожалению, это не будет подтверждено из-за ?. Хорошей новостью является то, что, поскольку это решение предназначено только для IE, вы можете просто создавать условные элементы при создании тега <body> и настройке классов, специфичных для IE: 

<!--[if IE 9]><body class="ie9 ie"><![endif]--> 
<!--[if IE 8]><body class="ie8 ie"><![endif]--> 
<!--[if IE 7]><body class="ie7 ie"><![endif]--> 
<!--[if lte IE 6]><body class="ie6 ie"><![endif]--> 
<![if !IE]><body><![endif]>

Теперь в вашем CSS: 

table#my_table {
    width:500px;
    max-width:500px;
}

.ie7 table#my_table {
    width:expression(document.body.clientWidth > 500? "500px": "auto" );
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...