Как создать встроенные элементы таблицы в HTML5?

Цель: Отобразить текст с помощью парного словарного перевода непосредственно под ним. Текст должен быть завернут в окно. Должен работать в HTML5. Решение должно выглядеть следующим образом:Как создать встроенные элементы таблицы в HTML5?

Screenshot

Причина HTML5, я хочу, чтобы страница поддерживается в JQuery и JQuery Mobile. Решение не обязательно использовать таблицы, я просто хочу отображать эти пары слов выше/ниже друг друга.

Это мое первое сообщение здесь, но уже несколько недель впитывает мудрость из stackoverflow. Какой отличный ресурс! С нетерпением ждем некоторых умных ответов.

Дополнительная информация:

Я сделал это для не-HTML5 с использованием встроенных таблиц, но как только вы положили в HTML5 идентификации «! DOCTYPE HTML» тег, он ломает и браузер рассматривает таблицы как элементы уровня блока.

Мое решение для не-HTML5:

<HTML> 
<BODY> 
<table border="1" style="display:inline"><tr><td>hello</td></tr><tr><td>bonjour</td></tr></table> 
<table border="1" style="display:inline"><tr><td>folks</td></tr><tr><td>les gens</td></tr></table> 
<table border="1" style="display:inline"><tr><td>thank you</td></tr><tr><td>je vous remercie</td></tr></table> 
<table border="1" style="display:inline"><tr><td>for your</td></tr><tr><td>pour votre</td></tr></table> 
<table border="1" style="display:inline"><tr><td>helping me</td></tr><tr><td>aide-moi</td></tr></table> 
<table border="1" style="display:inline"><tr><td>solve</td></tr><tr><td>à résoudre</td></tr></table> 
<table border="1" style="display:inline"><tr><td>this</td></tr><tr><td>ce</td></tr></table> 
<table border="1" style="display:inline"><tr><td>intractable</td></tr><tr><td>problème</td></tr></table> 
<table border="1" style="display:inline"><tr><td>problem</td></tr><tr><td>insoluble</td></tr></table> 
<table border="1" style="display:inline"><tr><td>.</td></tr><tr><td>.</td></tr></table> 
<table border="1" style="display:inline"><tr><td>hello</td></tr><tr><td>bonjour</td></tr></table> 
<table border="1" style="display:inline"><tr><td>folks</td></tr><tr><td>les gens</td></tr></table> 
<table border="1" style="display:inline"><tr><td>thank you</td></tr><tr><td>je vous remercie</td></tr></table> 
<table border="1" style="display:inline"><tr><td>for your</td></tr><tr><td>pour votre</td></tr></table> 
<table border="1" style="display:inline"><tr><td>helping me</td></tr><tr><td>aide-moi</td></tr></table> 
<table border="1" style="display:inline"><tr><td>solve</td></tr><tr><td>à résoudre</td></tr></table> 
<table border="1" style="display:inline"><tr><td>this</td></tr><tr><td>ce</td></tr></table> 
<table border="1" style="display:inline"><tr><td>intractable</td></tr><tr><td>problème</td></tr></table> 
<table border="1" style="display:inline"><tr><td>problem</td></tr><tr><td>insoluble</td></tr></table> 
<table border="1" style="display:inline"><tr><td>.</td></tr><tr><td>.</td></tr></table> 
</BODY> 
</HTML>

источник

2012-05-11 Alveoli

ссылка на ваш скриншот не работает. – oezi

Вы хотите display: inline-table.

В противном случае, у вас есть display: table-row Внутри display: inline и браузер генерирует анонимный display: table блок для хранения <tr>.

Это говорит о том, что вы действительно не похожи на табличную структуру данных.

Я подозреваю, вы бы лучше с одним столом, то:

table { display: inline; } 
tr { display: inline-table; }

... хотя я не проверял, что так я не могу сказать, что браузер поддержка будет походить.

источник

2012-05-11 13:33:53 Quentin

Это билет - спасибо! И так быстро. Проголосовано за:
'table {display: inline-table; } ' ' tr {display: inline-table; } ''

folks

les gens

folks

les gens

'
Кстати, это не работает в IE7, но мне нравится элегантность решения :) – Alveoli

Поскольку таблицы являются только двумерные, почему бы не просто использовать стилизованную список (LI)?

<ul><li>Item One</li><li>Item Two</li></ul>

Затем измените стиль списка:

ul, li {list-style:none;padding:0;margin:0;display:inline;margin-right:10px;} 
li {border:1px solid #000000}

источник

2012-05-11 13:31:56

Звучит интригующим, как бы я использовал LI? вы можете дать, например,? – Alveoli

Смотрите мои правки выше. –

Пробовал, но не работал. Пункт второй был справа от пункта 1, а не ниже его. Будет использовать другое решение, но спасибо за вашу помощь. – Alveoli

-1

я думаю, что это будет работает для вас, как вы показали скриншот: http://jsfiddle.net/5Ak2g/

источник

2012-05-11 13:40:57 Omm

Наиболее кросс-браузер способ сделать это, вероятно, чтобы удалить style атрибуты (это не практично, чтобы использовать их в любом случае, повторяя одни и те же настройки снова и снова) и использовать следующую таблицу стилей:

table { float: left; margin-right: 0.25em; margin-bottom: 0.25em; }

Это работает на всех CSS с поддержкой браузеров, даже старые версии IE. Настройте значения полей по желанию.

источник

2012-05-11 13:43:37

Спасибо за ответ - отлично работает, и я тестировал его совместимость со старыми версиями IE. Равное решение – Alveoli

Как создать встроенные элементы таблицы в HTML5?

ответ

Смежные вопросы