Проблема относительной ширины таблицы в Internet Explorer - PullRequest
Новая
       20

Проблема относительной ширины таблицы в Internet Explorer

0 голосов
/ 31 августа 2009

Я использую таблицы для генерации простых горизонтальных графиков (для простого масштабирования). Я использую colspanning, чтобы получить точное перекрытие (иногда ячейки перекрывают друг друга, но не в этом примере).

Моя проблема в том, что IE (8) неправильно отображает относительную ширину ячейки.

Я знаю, что ячейка не может быть меньше, чем ее содержимое, но это не проблема здесь.

Например, ячейка "X 65" в примере становится намного шире, чем 47% в IE. Тем не менее, у Firefox все отлично.

Вот пример: 

<html>
<body>

<style>
table.CompAnalysisTable {
    border-width: 1px;
    border-spacing: 0px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
    background-color: white;
    font-size:8px;
}

table.CompAnalysisTable td {
    border-width: 1px;
    border-style: solid;
    border-color: black;
}

table.CompAnalysisTable td table 
{
    border-style:none;
}
</style>

<table>
<tr>
<td>
</td>
<td class="nobr" valign="middle" align="left">Graph</td>
<td valign="middle" width="100%" align="right">Total 73</td>
</tr>
</tbody>
</table>

<table class="CompAnalysisTable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="nobr" style="width: 47%; background-color: rgb(172, 172, 255);" colspan="65">X&nbsp;65</td>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 5%; background-color: rgb(172, 172, 255);" colspan="7">A&nbsp;7</td>
<td class="nobr" style="width: 1%; background-color: rgb(172, 172, 255);">B&nbsp;1</td>
</tr>
<tr>
<td class="nobr" style="width: 47%; background-color: white;" colspan="65"></td>
<td class="nobr" style="width: 52%; background-color: rgb(255, 152, 152);" colspan="72">A&nbsp;72</td>
<td class="nobr" style="width: 1%; background-color: rgb(255, 152, 152);">B&nbsp;1</td>
</tr>
</table>


</body>
</html>

Я пробовал другие методы, такие как div и отдельные таблицы для каждой строки, но colspanning был единственным методом для получения точного перекрытия.

Другим решением является рендеринг изображений на сервере, но тогда я теряю масштабирование, и это занимает довольно много времени.

Любая помощь очень ценится.

Ответы [ 2 ]

0 голосов
/ 29 января 2010

У меня была та же проблема, что и у вас ... Мое решение - использовать какой-нибудь забавный код JavaScript (с Jquery, конечно ;-)), чтобы исправить ширину TD ...

Что-то бесполезное, если вы хотите ширину до 100%, установите ширину в 10 000 пикселей!

Та же проблема в IE, Google Chrome и Safari

0 голосов
/ 05 сентября 2009

Заголовок, подобный этому, избавит вас от необходимости исправлять его в IE 8, если он будет отображать его как IE 7: 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Кроме этого вы можете попытаться увидеть, что делает IE 8, и исправить это с помощью определенного условия HTML: 

<!--[if IE 8]><![endif]-->

Хотелось бы помочь больше, но у меня нет IE 8, поэтому я не вижу проблемы.
Может быть, эти ссылки могут помочь:

Условия HTML
За пределами доктипов

...