Обновление: я зарегистрировал сообщение об ошибке в Google - http://code.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
Обновление: @benni_mac_b указывает, что проблема исчезнет, если вы отключите автоподбор страниц. Это «решение» работает на 2.1 и 2.2 - оказывается, что телефон 2.3, на котором я тестировал, отключил автоподгонку, и при включении стол снова ломается.
Полагаю, я сейчас ищу способ запретить Android автоматически подгонять таблицу (и переопределять настройки браузера). Мне не нравятся мои шансы, судя по моим поискам в Google.
Я столкнулся со странной проблемой с веб-браузером Android и составными столбцами - например, если у меня есть такая структура:
<table class="amhtable">
<col width="16.72%" />
<col width="16.62%" />
<col width="16%" />
<col width="16%" />
<col width="34.67%" />
<thead>
<tr class="heading">
<td>Modifying circumstance</td>
<td>Common pathogens</td>
<td>First choice</td>
<td>Alternative</td>
<td>Additional information</td>
</tr>
</thead>
<tr class="heading2">
<td colspan="5" width="100%">SECTION TITLE</td>
</tr>
<tr class="body">
<td>column 1</td>
<td>column 2</td>
<td>column 3</td>
<td>column 4</td>
<td>column 5</td>
</tr>
</table>
Составной ряд уменьшится, чтобы соответствовать размеру экрана, даже если сама таблица все еще шире. Это означает, что в некоторых случаях фон строки heading2 отсутствует в большинстве таблиц, что делает его довольно странным.
Этого не происходит на iPhone или любом другом браузере настольного компьютера (Chrome, IE, FF, Safari), о котором мы знаем, - только на Android (несколько устройств и версий).
CSS:
.amhtable {
border-width:1px;
border-style:solid;
border-color:#000000;
border-collapse: collapse;
border-spacing: 0;
padding: 5px;
font-weight: normal;
color: #000000;
}
.amhtable td {
border-width:1px;
border-style:solid;
border-color:black;
padding: 3px;
}
.amhtable th {
border-width:1px;
border-style:solid;
border-color:#777777;
background-color:#0084D6;
}
.amhtable .heading {
border-width:1px;
border-style:solid;
border-color:#000000;
background-color:#567ac4;
font-weight: bold;
font-style: italic;
font-family: Verdana, Arial, Helvetica, DejaVu Sans, Bitstream Vera Sans, sans-serif;
}
.amhtable .heading2 {
border-width:1px;
border-style:solid;
border-color:#000000;
background-color:#82a3e7;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, DejaVu Sans, Bitstream Vera Sans, sans-serif;
}
Пока что я пробовал следующее:
- Снятие
<col> элементов
- Добавление шестого столбца и пустых
<td> элементов в каждую строку
- Удаление стиля сглаживания границ (после прочтения Отображение в браузерах Webkit для таблицы в зависимости от colspan )
- Установка ширины составного столбца на 100% (вместе с вышеуказанными изменениями)
- Установка фиксированной ширины в таблице и установка расширенного столбца на 100%
- Заменены% ширины столбцов с фиксированной шириной в пикселях
- Установите относительное положение для составной ячейки (а затем и строки) и установите влево и вправо на 0.
- Установите положение, которое будет относительным для строки с оставленным 0 и шириной 1000px
- Завернул стол в ширину 100%
<div>
Одна вещь, которую мы заметили вчера, состоит в том, что таблица должна иметь черную границу 1px - но на устройствах 2.1 / 2.2, которые мы тестируем, есть пробел, где строка не завершается. Это действительно кажется проблемой рендеринга на этих устройствах.