Как настроить ширину столбца под его содержимое в режиме совместимости IE9? - PullRequest
Новая
       43

Как настроить ширину столбца под его содержимое в режиме совместимости IE9?

1 голос
/ 29 ноября 2011

В моем HTML есть следующая таблица. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<style type="text/css">
    table, td, tr, th{
        border:1px;
    }

    .onepx{
        width:1px;
    }
</style>


<div style="max-width:700px;">
    <table>
        <tr><td colspan="2">this is a loooooooooooooooong text</td></tr>
        <tr><td class="onepx">a:</td><td>b</td></tr>
        <tr><td class="onepx">c:</td><td>d</td></tr>
    </table>
<div>

Я хочу, чтобы ширина первого столбца во втором и третьем ряду соответствовала длине содержимого (поэтому я поместил width = "1px" там). А пока я хочу, чтобы ширина таблицы соответствовала длине самого длинного содержимого в таблице (которая является первой строкой), а не охватывала максимальную ширину ограничивающего его div.

Он работает в Firefox и IE9 с отключенным режимом совместимости, как показано ниже.

firefox

Однако в режиме совместимости с IE 9 он не работает должным образом, как показано.

ie compatibility mode

По некоторым причинам я не могу отключить режим совместимости в IE9. Так есть ли способ стилизовать таблицу как в режиме совместимости?

Заранее спасибо.

PS. Я задал похожий вопрос, не подчеркивая режим совместимости IE9. Этот вопрос возникает после получения информации из предыдущего вопроса. Я не уверен, должен ли я объединить этот вопрос с предыдущим, поскольку есть новое требование. Дайте мне знать, если есть какие-либо советы.

1 Ответ

2 голосов
/ 30 ноября 2011

Итак, глядя на то, что вы предоставили, если оно настроено в вашем файле, вы работаете в строгом режиме и пропускаете открытие и.

Что касается изменения режима IE9, выберите F12, и вы можете изменить режим браузера и документа.

Кроме того, не забудьте добавить <meta http-equiv="X-UA-Compatible" content="IE=9" > к вашей голове.

Стиль таблицы должен быть перемещен в CSS.

Вы также можете попробовать:

Таблица: 

<table class="fixed">
    <col width="10px" />
    <tr>
        <td>text</td>
    </tr>
</table>

CSS: 

table.fixed { table-layout: fixed; }
table.fixed td { overflow: hidden; }
...