跨区列崩于Android的网络浏览器（使用自动调整页面时） [英] Spanned columns collapsing on Android web-browser (when using auto-fit pages)
问题描述
更新：我已经登录与谷歌的错误报告 - <一个href="http://$c$c.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars" rel="nofollow">http://$c$c.google.com/p/android/issues/detail?id=22447&can=4&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
Update: I've logged a bug report with 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手机，我在测试上有禁用自动调整入手，而当再次启用该表符
Update: @benni_mac_b points out that the problem goes away if you disable auto-fit pages. This 'solution' works on 2.1 and 2.2 - turns out that the 2.3 phone I was testing on had disabled auto-fit to start with, and when enabled the table breaks again.
猜猜我现在在寻找一种方式来告诉机器人不自动调整表（和覆盖浏览器设置）。不喜欢我的机会来看我的谷歌迄今为止搜索。
Guess I'm now looking for a way to tell Android not to auto-fit the table (and override the browser setting). Not liking my chances judging by my Google searches so far.
我遇到了一个奇怪的问题了Android网络浏览器和跨的列 - 例如，如果我有这样的结构：
I've encountered an odd issue with the Android web-browser and spanned columns - for example, if I have this structure:
<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行的背景缺失在大多数表在某些情况下，使它看起来很奇怪。
The spanned row will reduce to fit the size of the screen, even if the table itself is still wider. This means that the heading2 row's background is missing across most of the table in some cases, making it look quite odd.
这是不会发生在iPhone上，或者任何桌面浏览器（Chrome浏览器，IE，FF，Safari浏览器），我们是知道的 - 只是在Android（多设备和版本）
This is not happening on iPhone, or any desktop browser (Chrome, IE, FF, Safari) that we're aware of - just on Android (multiple devices and versions).
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;
}
到目前为止，我已经试过如下：
So far, I've tried the following:
- 删除
＆LT;山坳＆GT;元素 - 添加第六列和空
＆LT; TD＆GT;元素融入到每行 - 删除边界崩溃式的（看完后<一href="http://stackoverflow.com/questions/3384132/webkit-browsers-rendering-problem-for-table-depending-on-colspan">Webkit浏览器渲染问题的表根据合并单元格）
- 设置跨越列到100％的宽度（沿着与上面的变化）
- 设置一个固定的宽度在桌子上，跨区列设置为100％
- 替换列的％基于宽度固定像素宽度
- 设置的位置是相对于跨区细胞（再行），并设置左，右为0。
- 设置位置与左为0，宽度为1000px 来是相对于该行
- 裹在表中100％的宽
＆LT; DIV＆GT;
- Removing the
<col>elements - Adding a sixth column and empty
<td>elements into each row - Removing the border-collapse style ( after reading Webkit Browsers Rendering Problem for Table Depending on colspan )
- Setting the width of the spanned column to 100% (along with the changes above)
- Setting a fixed width on the table and setting the spanned column to 100%
- Replaced the % based widths of the columns with fixed pixel widths
- Set the position to be relative for the spanned cell (and then the row) and set left and right to 0.
- Set the position to be relative for the row with left as 0, and width as 1000px
- Wrapped the table in a 100% wide
<div>
这是我们昨天看到的是，表中应该有一个1px的黑色边框有一件事 - 但对我们正在测试在哪里行不完整的2.1 / 2.2设备的差距。它确实似乎是在这些设备上渲染问题。
One thing that we noticed yesterday is that the table should have a 1px black border - but there is a gap on the 2.1/2.2 devices we're testing on where the row doesn't complete. It really does seem to be a rendering problem on these devices.
推荐答案
我不知道下面会有所帮助：
I wonder if the following will help:
-
这些包裹体排在tbody元素：
Wrap those body rows in a tbody element:
从标题行中删除宽度=100％。合并单元格=5应该跨越表格的宽度，无论如何，与浏览器相应的大小。我不知道如果谷歌浏览器是跨preting，从字面上作为当前屏幕的宽度。
Remove the width="100%" from your header row. Colspan="5" should span the width of the table anyway, with the browser sizing accordingly. I wonder if the Google browser is interpreting that literally as the width of the current screen.
添加以下的类.amhtable：
Add the following to the class for .amhtable:
float: left;
width: 100%;
要查看它是否是一个相对大小的错误。
To see if it's a relative sizing bug.
出于兴趣，这是否如标题行出现在表中的任何地方发生的呢？抑或只是第一次THEAD后，会出现？
Out of interest, does this happen if the heading row appears anywhere in the table? Or is it just the first time it occurs after 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>
如果您尝试会怎么样？
其他的事情你可以尝试是把实际的标题文本中的一个元素，如：
Other things you might try are putting the actual heading text in an element like:
<tr class="heading2">
<td colspan="5"><span style="100%">SECTION TITLE</span></td>
</tr>
这篇关于跨区列崩于Android的网络浏览器（使用自动调整页面时）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
