如何在HTML5中创建内联表元素？

Goal: Display some text with a paired word-for-word translation directly underneath. Text must wrap in window. Must work in HTML5. Solution should look like this:

目标：直接在下方显示一些带有成对逐字翻译的文字。文本必须包含在窗口中。必须在HTML5中工作。解决方案应如下所示：

Screenshot

截图

Reason for HTML5 is I want the page to be supported in jQuery and jQuery Mobile. Solution doesn't have to use tables, I just want to display these word pairs above/below each other.

HTML5的原因是我想在jQuery和jQuery Mobile中支持该页面。解决方案不必使用表格，我只想在对方上方/下方显示这些单词对。

This is my first post here but already been soaking up the wisdom from * for weeks. What a great resource! Looking forward to some smart replies.

这是我在这里的第一篇文章，但已经从*中吸取了数周的智慧。多么棒的资源！期待一些聪明的回复。

Additional info:

附加信息：

I have done it for non-HTML5 by using inline tables, but as soon as you put in an HTML5 identifying "!DOCTYPE html" tag, it breaks and the browser treats the tables as block level elements.

我通过使用内联表为非HTML5做了这个，但是只要你输入一个标识“！DOCTYPE html”标签的HTML5，它就会中断，浏览器将这些表视为块级元素。

My solution for non-HTML5:

我的非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>

4 个解决方案

#1

You want display: inline-table.

你想要显示：内联表。

Otherwise, you have a display: table-row inside a display: inline and the browser generates an anonymous display: table block to hold the <tr>.

否则，你有一个display：table-row在display：inline中，浏览器会生成一个匿名显示：table block来保存。

That said, what you have really doesn't look like a tabular data structure.

那就是说，你真正看起来不像表格数据结构。

I suspect you would be better off with a single table then:

我怀疑你用一张桌子会更好：

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

… although I haven't tested that so I can't say what browser support would be like.

...虽然我没有测试过，所以我不能说什么是浏览器支持。

#2

The most cross-browser way to do this is probably to remove the style attributes (it’s not practical to use them anyway—repeating the same settings again and again) and to use the following style sheet:

最常见的跨浏览器方式可能是删除样式属性（无论如何使用它们都是不切实际的 - 一次又一次地重复相同的设置）并使用以下样式表：

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

This works on all CSS-enabled browsers, even old versions of IE. Tune the margin values as desired.

这适用于所有支持CSS的浏览器，甚至是旧版本的IE。根据需要调整边距值。

#3

Since the tables are only two-dimensional, why not just use a styled list (LI)?

由于表只是二维的，为什么不使用样式列表（LI）？

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

Then change the style of the list:

然后更改列表的样式：

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

#4

-1

i think this will works for you as you shown screenshot : http://jsfiddle.net/5Ak2g/

我认为这对你有用，因为你显示截图：http：//jsfiddle.net/5Ak2g/

#1