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 Browsers Rendering for Table Depending on colspan后）
将跨区列的宽度设置为100％（以及上述更改）
在表格上设置固定宽度并将跨区列设置为100％
替换了具有固定像素宽度的列的基于％的宽度
将位置设置为跨越单元格（然后是行）的相对位置，并将左右设置为0.
将行的位置设置为相对，左侧为0，宽度为1000px
将表格包裹在100％宽<div>

我们昨天注意到的一件事是桌子应该有一个1px的黑色边框 - 但是我们正在测试行未完成的2.1 / 2.2设备上存在间隙。它确实似乎是这些设备上的渲染问题。

Answer 1

我想知道以下内容是否会有所帮助：

将这些体行包裹在tbody元素中：
删除宽度=＆＃34; 100％＆＃34;来自标题行。列跨度=＆＃34; 5＆＃34;无论如何应该跨越表的宽度，浏览器大小相应。我想知道谷歌浏览器是否正在将其解释为当前屏幕的宽度。
将以下内容添加到.amhtable的类中：
```
float: left;
width: 100%;
```

看看它是否是一个相对大小的错误。

出于兴趣，如果标题行出现在表格的任何位置，是否会发生这种情况？或者它是第一次发生在thead之后？

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

    <tbody>
        <tr class="heading2">
            <td colspan="5">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>
 </tbody>

</table>

如果你尝试会怎么样？

您可能尝试的其他方法是将实际标题文本放在以下元素中：

<tr class="heading2">
    <td colspan="5"><span style="100%">SECTION TITLE</span></td>
</tr>

Answer 2

也许这是一个错误，但你是否试图摆上你的桌子：

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

Answer 3

列的总宽度是否为100.01％？

尝试将第一列减少到16.71％？

Answer 4

我不确定，但请尝试使用此方法http://jsfiddle.net/DhAYd/9/

Answer 5

错误报告中的（X）HTML文档无效;充其量它是不完整的。需要DOCTYPE声明（HTML 4.01，XHTML 1.0）或doctype（HTML5）。在当前的HTML5工作草案中，col element does not have a width attribute（W3C Validator表示它已过时;您应该使用CSS代替）。但这也不能是有效的HTML或XHTML 1.0，因为title element是missing。

由于缺少DOCTYPE声明，布局引擎可能会进入Quirks Mode，您无法预期可互操作的行为。

此外，（X）HTML中的百分比为not specified to support decimals，但未明确禁止。 HTML语法验证程序不会捕获此错误，因为%Length是CDATA的别名（任何字符数据）。

你应该

验证您的文档：W3C Validator
使其有效。
查看是否使用整数百分比或CSS帮助。

只有当您仍然看到不同的行为时，您才应该提交错误。

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

5 个答案: