如何使 HTML 表格内联
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7457319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make an HTML table inline
提问by oz1cz
In HTML I want to display a small table as part of a paragraph. One way to do that is this:
在 HTML 中，我想显示一个小表格作为段落的一部分。一种方法是这样的：
<table>
<tr>
<td>
Before
<table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr> </table>
After
</td>
</tr>
</table>
which produces this nice layout:
这产生了这个漂亮的布局：
a b
Before After
c d
which is exactly what I want.
这正是我想要的。
But it seems rather silly to me to use a table inside a table when what I really want is to use a table inside a paragraph. However, if I try using this HTML:
但是，当我真正想要的是在段落中使用表格时，在表格中使用表格对我来说似乎很愚蠢。但是，如果我尝试使用此 HTML：
<p>
Before
<table style="display:inline;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table>
After
</p>
I get this ugly layout:
我得到了这个丑陋的布局：
Before
a b
After
c d
I've tried using various different display styles, but none seem to do what I want.
我尝试过使用各种不同的显示样式，但似乎没有一个能满足我的要求。
Am I forced to use the table-within-table code, or am I missing something?
我是被迫使用表中表代码，还是我遗漏了什么？
采纳答案by Will
Making the paragraph display: inline;works for me. But, if you have multiple paragraphs, you will have to add a <br />after each of them.
使段落display: inline;对我有用。但是，如果您有多个段落，则必须<br />在每个段落之后添加一个。
回答by Spadar Shut
You could use the following css:
您可以使用以下 css：
display:inline-table
onnly IE7 and below don't support this property. Probably wrapping the table in a span with zoom:1applied to it could help IE7.
只有 IE7 及以下不支持此属性。可能将表格包装在一个跨度中并zoom:1应用于它可以帮助 IE7。
回答by Doctor Jonesington
I'm using Chrome browser on Linux and I am able to get this to work by adding display:inline-tableto both the paragraph (p) and table tags:
我在 Linux 上使用 Chrome 浏览器，我可以通过添加display:inline-table段落 (p) 和表格标签来使其工作：
<p style="display:inline-table;">
Before
<table style="display:inline-table;"><tr><td>a</td><td>b</td></tr> <tr><td>c</td><td>d</td></tr></table>
After
</p>
Just checked Firefox on Linux and it seems to work there too.
刚刚在 Linux 上检查了 Firefox，它似乎也在那里工作。
FYI: Removing either of the two display:inline-tablestyles gave undesirable formatting.
仅供参考：删除两种display:inline-table样式中的任何一种都会产生不良格式。
回答by natedavisolds
I suppose that you have a good reason to use a table here instead of css. You can get the effect using a single table.
我想您有充分的理由在这里使用表格而不是 css。您可以使用单个表来获得效果。
<table>
<tr>
<td rowspan="2">Before</td>
<td>a</td>
<td>b</td>
<td rowspan="2">After</td>
</tr>
<tr>
<td>c</td>
<td>d</td>
</tr>
</table>
回答by simplyPTA
it doesn't work because <table>shouldn't be a child of <p>
它不起作用，因为<table>不应该是<p>
(you can try the W3C validator to see more about this error)
（您可以尝试 W3C 验证器以查看有关此错误的更多信息）
simply replace <p>with <div>
简单地替换<p>为<div>
