it-swarm.com.ru

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

У меня есть следующая 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?

42
Luke

Вот мой результат для неудачной 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>
13
Libor Skočík

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

<?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 ??? ДЕЙСТВИТЕЛЬНО?

23
Luke

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

Итоговый счет: Люк: +1 IE: Соси.

4
ogradyjd

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

cell.setAttribute("colSpan", 9);
1
Sanath Nair

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

Но это все еще отстой.

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

<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> 
0
Ray

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

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

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

Правка: Это также работает с вашим вторым контрольным примером.

0
Alohci