Мое почтение присутствующим и благодарность заранее.
Пытаюсь сделать некую диаграмму в Википедии. Основная сложность в том, что окончательный HTML составляет их движок на основании написанного мной кода на их языке. Возможность влиять на этот HTML у меня есть, но ограниченная. На данный момент имеется следующий HTML:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
<!DOCTYPE html>
...
<table style="background-color:lightblue;" cellpadding="0" cellspacing="0" border="1">
<tr valign="top">
<td style="color:white;font-size:50%;padding:0px;margin:0;">
<div style="padding:0;margin:0;height:8px;border:1px solid red;"><b>Upper level</b></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:5px;"><img src="HT_N.png" width="55" height="5" /></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:5px;border:1px solid red;"><img src="HT_A1.png" width="55" height="5" /><img src="HT_S2.png" width="55" height="5" /></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:8px;border:1px solid red;"><img src="HP1_S1.png" width="55" height="8" /><img src="HP1_S2.png" width="55" height="8" /></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:8px;border:1px solid red;"><img src="HP2_S1.png" width="55" height="8" /><img src="HP2_S2.png" width="55" height="8" /></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:5px;border:1px solid red;"><img src="HT_S1.png" width="55" height="5" /><img src="HT_A2.png" width="55" height="5" /><img src="3/3e/HL_L.png/11px-HL_L.png" width="11"
height="5" /></div>
</td>
</tr>
<tr valign="middle">
<td style="white-space: nowrap;">
<div style="padding:0;margin:0;height:5px;border:1px solid red;"><img src="HT_N.png" width="55" height="5" /></div>
</td>
</tr>
</table>
На картинке слева то, как это выглядит визуально. На картинке справа то, что должно быть.
Примечания.
1. Если убрать <!DOCTYPE html> в самом начале, то проблема решается одним махом, но убрать это я не могу, это вставляет движок.
2. div'ы я поставил для борьбы с этим же <!DOCTYPE html> - без них все td получаются очень большой высоты (хотя та высота, которую я задал у div'ов, просто равна высоте img'ей и без <!DOCTYPE html> всё работает и так).
3. Бордеры у div'ов и таблиц я сделал для отладки, чтобы было видно, где что. Видно, что таблица рисуется правильно, а вот img'и оказываются ниже своих клеток. Причем img'и высотой 5 пикселей съезжают вниз на 10 пикселей, а высотой 8 - на 7.
4. Картинка такая мелкая потому, что в более крупном масштабе этой проблемы нет.
5. Пробовал в разных браузерах (Хром, ФФ, ИЭ), проблема одна и та же.
6. Проверено, что проблема решается, если всем img'ам задать style="vertical-align:top;". Однако у меня такой возможности нет.
