How do I make an HTML table inline

Answer 1

You could use the following css:

display:inline-table

onnly IE7 and below don't support this property. Probably wrapping the table in a span with zoom:1 applied to it could help IE7.

Answer 2

I'm using Chrome browser on Linux and I am able to get this to work by adding display:inline-table to both the paragraph (p) and table tags:

<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.

FYI: Removing either of the two display:inline-table styles gave undesirable formatting.

Answer 3

it doesn't work because <table> shouldn't be a child of <p>

(you can try the W3C validator to see more about this error)

simply replace <p> with <div>

Answer 4

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.

Answer 5

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.

<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>