跨页列在Android Web浏览器上折叠(使用自动调整页面时)

Question

更新:我已经在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设备上存在间隙.它确实似乎是这些设备上的渲染问题.

Answer 1

也许这是一个错误，但您是否尝试将其放在桌子上：

table class="amhtable" **cellspacing="0"**