Ошибка ширины ячейки таблицы в Internet Explorer 8 с набором colspan - PullRequest
Новая
       23

Ошибка ширины ячейки таблицы в Internet Explorer 8 с набором colspan

42 голосов
/ 10 марта 2010

У меня есть следующая HTML-страница: 

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en" xml:lang="en">
<head>
    <title>A title</title>
</head>
<body>
    <table style="width: 700px; border: solid 1px green">
        <tr>
            <td style="border: solid 1px red;" colspan="2">A cell with a bunch of text.  The amount of text here increases the 'x' cell.<td>
        </tr>
        <tr>
            <td style="width: 100px; border: solid 1px purple;" >x</td>
            <td style="border: solid 1px blue;">Some sample text</td>
        </tr>
    </table>
</body>
</html>

Во всех браузерах, кроме Internet Explorer (8), ячейка с содержимым «x» имеет ширину 100 пикселей, а соседняя ячейка заполняет остальную часть таблицы. В Internet Explorer 8 он немного больше, и его размер варьируется в зависимости от объема текста в ячейке с установленным colspan = "2". Есть ли исправление для этой ошибки в IE?

Ответы [ 6 ]

23 голосов
/ 10 марта 2010

Хорошо, это чистое безумие. Ответ Рэя работал для первоначального теста, но не для моего примера из реальной жизни, который привел меня к созданию второго контрольного примера с исправлением Рэя: 

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en" xml:lang="en">
<head>
    <title>title</title>
</head>
<body> 

<form>

    <table style="width: 700px;">
        <tr>
            <td colspan="2">Here is some really long text.  For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why.  Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
        </tr>
        <tr>
            <td style="width:100px; background: green;"><input type="checkbox" value="1" /></td>
            <td style="width:600px;">blah</td>
        </tr>
    </table>

    <table style="width: 700px;" border="0">
        <tr>
            <td colspan="2">Some short text</td>
        </tr>
        <tr>
            <td style="width: 100px; background: red;"><input type="checkbox" value="1" /></td>
            <td style="width: 600px;">blah</td>
        </tr>
    </table>

</form>

</body>
</html>

По какой-то причине наличие элементов ввода в первой ячейке таблицы делает решение Рэя не совсем эффективным.

Решение, которое в итоге решило реальный случай, который мы пытались исправить, требовало добавления «table-layout: fixed» к таблицам, и чтобы в первой строке таблицы были пустые ячейки с набором ширины. Вот модифицированная версия предыдущего примера с исправлением, которое я только что описал: 

<?xml version="1.0" encoding="UTF-8"?>
<!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" lang="en" xml:lang="en">
<head>
    <title>title</title>
</head>
<body> 

<form>

    <table style="table-layout: fixed; width: 700px;">
        <tr>
            <td style="width: 100px;"></td>
            <td style="width: 600px;"></td>
        </tr>
        <tr>
            <td colspan="2">Here is some really long text.  For some reason, in internet explorer 8, the long text in a table cell that spans two columns above some other cells affects the cell below it. I have no idea why.  Also, if the contents of the first cell below this one is some text rather than a checkbox, then the effect is not as dramatic, though it's still there.</td>
        </tr>
        <tr>
            <td style="background: green;"><input type="checkbox" value="1" /></td>
            <td>blah</td>
        </tr>
    </table>

    <table style="width: 700px; table-layout: fixed;" border="0">
        <tr>
            <td style="width: 100px;"></td>
            <td style="width: 600px;"></td>
        </tr>
        <tr>
            <td colspan="2">Some short text</td>
        </tr>
        <tr>
            <td style="background: red;"><input type="checkbox" value="1" /></td>
            <td>blah</td>
        </tr>
    </table>

</form>

</body>
</html>

Действительно Internet Explorer ??? На самом деле?

13 голосов
/ 09 июня 2010

Вот мой результат для неудачной td ширины в IE8: 

<table style="width: 100%;" border="1">
  <tr>
    <td style="width:auto;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>

<!-- IE8 HACK  100% WIDTH -->
<table style="width: 100%;" border="1">
  <tr>
    <td style="width:100%;">td1</td>
    <td style="width:15px;">td2</td>
    <td style="width:20px;">td3</td>
  </tr>
  <tr>
    <td colspan="3" style="width:auto;">ds fasdf asdf asdf asdf asfd asf asdf asdf adf sadf asdf asdf asdf asdf asdf asfasdf dasf sdaf asd</td>
  </tr>
</table>
4 голосов
/ 28 октября 2010

Ответ Люка с "таблицей-раскладкой: исправлено" - это то, что, наконец, сделал для меня. Без «table-layout: fixed» IE продолжал игнорировать явные объявления ширины для ячеек без colspan. С ним все работало, хотя приходилось явно указывать всем ячейкам, не относящимся к кольцу, какова их ширина, а не просто течь влево, как любой другой браузер на планете.

Итоговая оценка: Люк: +1 IE: Соси.

1 голос
/ 06 февраля 2012

Используйте функцию setAttribute. Атрибут Name = "colSpan". Это работает и в IE 8, и в Firefox.
Пример: 

cell.setAttribute("colSpan", 9);
0 голосов
/ 10 марта 2010

Если вы установите ширину первого td (с colspan = "2") равной 100px, то вы получите желаемое поведение, по крайней мере для этого теста.

Насколько я могу судить, поведение IE8 корректно в соответствии со спецификацией CSS 2.1 здесь: http://www.w3.org/TR/CSS2/tables.html#width-layout раздел 17.5.2.2 Автоматическая разметка таблицы. Шаг 3 выглядит подозрительно.

Однако, это, вероятно, ошибка спецификации, поскольку во многих деталях все выглядит очень расплывчато. Алгоритм в CSS 3 выглядит гораздо более тщательно заданным.

РЕДАКТИРОВАТЬ: Это также работает с вашим вторым контрольным примером.

0 голосов
/ 10 марта 2010

Поскольку вы знаете размер таблицы (700), вы можете обойти ошибку, установив ширину обеих ячеек во втором ряду. Если вторая ячейка установлена ​​на 600 пикселей, таблица ведет себя.

Но все равно отстой.

Правка - вот еще один обходной путь - добавьте пустое изображение в первую ячейку, чтобы увеличить размер, затем добавьте ширину 100% во вторую ячейку: 

<tr> 
  <td style="width: 100px; border: solid 1px purple;" >x<img src="\images\blank.gif" width="100" height="1" /></td> 
  <td style="border: solid 1px blue;width:100%;">Some sample text</td> 
</tr>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...