Браузеры Webkit, рендеринг для таблицы в зависимости от colspan - PullRequest
Новая
       14

Браузеры Webkit, рендеринг для таблицы в зависимости от colspan

3 голосов
/ 02 августа 2010

Пожалуйста, сообщите, галлюцинирую ли я ... Я надеюсь на это, потому что не могу правильно отобразить таблицы в зависимости от браузера, и я надеюсь, что кто-то может предложить мне решение.

Мои проблемы в том, чтонекоторые таблицы не отображают правые боковые границы в браузерах, использующих webkit, например Safari и Chrome.Версия Safari, которую я использую, - 4.0.4 (531.21.10) в соответствии с пунктом меню about в справке.Версия Chrome, которую я использую, предположительно является самой последней в соответствии с веб-сайтом Google, но я не смог найти пункт меню «о» в справке для подтверждения версии ...

Проблемные таблицы - это те, которыеиспользуют атрибут colspan в зависимости от количества столбцов.Если в таблице два или меньше столбцов с colspan, то таблица отображается правильно с правой границей.Если в таблице 3 или более столбцов с colspan, таблица отображается с отсутствующей правой границей.Если таблица не имеет colspan, то таблица отображается правильно, независимо от количества столбцов.Почему количество столбцов плюс атрибут colspan имеют какое-либо отношение к цене яиц в Китае?

Кстати: таблицы правильно отображаются в IE, FF и Opera ... проблема только в Safariи Chrome ...

Вот пример HTML-кода для примера с двумя столбцами, который отображается правильно: 

<HTML>
<HEAD><TITLE>test Webkit with 2 columns</TITLE></HEAD>
<BODY>
    <TABLE id="GridView1" border="0" cellSpacing="0"
        style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
        <TBODY><TR><TD colSpan=2>no items found</TD></TR></TBODY>
    </TABLE>
    <TABLE id="GridView2" border="0" cellSpacing="0"
        style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
        <TBODY>
            <TR>
                <TH scope=col>id_pur</TH>
                <TH scope=col>subscription_pur</TH>
            </TR>
            <TR><TD>11</TD><TD>2</TD></TR>
        </TBODY>
    </TABLE>
</BODY>
</HTML>

В приведенном выше примере отображаются две таблицы, обе таблицы отображают правую границу.

Вот пример HTML-кода для примера с тремя столбцами, в котором одна таблица отображается неправильно: 

<HTML>
<HEAD><TITLE>test Webkit with 3 columns</TITLE></HEAD>
<BODY>
    <TABLE id="GridView1" border="0" cellSpacing="0"
        style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
        <TBODY><TR><TD colSpan=3>no items found</TD></TR></TBODY>
    </TABLE>
    <TABLE id="GridView2" border="0" cellSpacing="0"
        style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
        <TBODY>
            <TR>
                <TH scope=col>id_pur</TH>
                <TH scope=col>subscription_pur</TH>
                <TH scope=col>purchaser_pur</TH>
            </TR>
            <TR><TD>11</TD><TD>2</TD><TD>85</TD></TR>
        </TBODY>
    </TABLE>
</BODY>
</HTML>

Для приведенного выше примера в первой таблице с colspan отсутствует правая граница при отображениис помощью webkit broswers, но во второй таблице без colspan не пропущена граница.

Как получить правильный столбец для отображения, если имеется более двух столбцов и задано свойство colspan?

1 Ответ

2 голосов
/ 02 августа 2010

Насколько я могу судить, это ошибка в WebKit.

Существует сообщение об ошибке , которое похоже на вашу проблему, возможно, вы могли бы включить туда и свой пример. В этом отчете об ошибке предлагается обходной путь: добавление дополнительных столбцов для создания необходимого colspan или удаление ненужных colspan.

Это правильно отображает в Safari: 

<HTML>
<HEAD><TITLE>test Webkit with 3 columns</TITLE></HEAD>
    <STYLE>
        tr.dummy-row>td { padding: 0; }
    </STYLE>
<BODY>
    <TABLE id="GridView1" border="0" cellSpacing="0"
        style="BORDER: #714938 2px solid; BORDER-COLLAPSE: collapse;">
        <TBODY><TR><TD colSpan=3>no items found</TD></TR></TBODY>
        <TBODY><TR class="dummy-row"><TD></TD><TD></TD><TD></TD></TR></TBODY>
    </TABLE>
</BODY>
</HTML>
...