CSS: горизонтальный UL, где LI содержит ТАБЛИЦУ. Возможно?
Я пытаюсь исправить ужасную структуру вложенных таблиц для сайта. На странице будет переменное количество элементов, использующих диаграммы Google. Вместо сложного спагетти-кода, который пытается расположить элементы внутри ячеек таблицы, я хочу использовать горизонтальный UL, чтобы блоки содержимого располагались чисто независимо от задействованных диаграмм. Проблема, с которой я столкнулся, заключается в том, что компоненты диаграмм Google используют таблицы. Когда элемент таблицы существует где-либо внутри LI, LI перемещается на следующую строку (при условии, что элементы таблицы по умолчанию имеют новую строку до и после).
Я безуспешно пробовал различные режимы отображения таблицы. Это безнадежное дело?
Пример HTML-кода для иллюстрации проблемы:
<html>
<body>
<style type='text/css'>
#navlist li{
display:inline;
list-style-type:none;
}
</style>
<ul id='navlist'>
<li>TEST</li>
<li>TEST2</li>
<li>
<table style='border:1px solid black'><tr><td>TEST</td></tr></table>
</li>
<li>TEST3</li>
<li>
<table style='border:1px solid blue'><tr><td>TEST</td></tr></table>
</li>
<li>
<table style='border:1px solid green'><tr><td>TEST</td></tr></table>
</li>
</ul>
</body>
</html>