HTML prevent line break (between two table tags)

Question

Hello,

I have following code:

<table>
    <tr>
        <td>Table 1</td>
    </tr>
</table>

<table>
    <tr>
        <td>Table 2</td>
    </tr>
</table>

Very unfortunately, a line break is inserted between these two tables. I have tried putting them both in a single span and setting the whitespace to nowrap, but at no avail. Please, could you tell me how I can simply put these elements in a single row, without setting the float attribute in CSS and without surrounding each table with a <td> {table} </td> and then putting this in a table row.

Thanks a lot in advance. I have asked Google, but it just wouldn't say anything ^^ StackOverflow remained silent so far, too

Answer 1

Try this css:

table {
  padding:0px;
  margin:0px;
}

Or you can hack into negative top-margin

table{
  margin-top:-20px;
}

Answer 2

What if you float table 1 to the left, and table to to the right? By default, tables are "block" elements, so you could try display:inline.

Answer 3

or this:

<table border=1 style="position:absolute;width:100;height:30;left:0;top:100"> 
<tr> 
<td>aaaaa</td> 
</tr> 
</table> 
<table border=1 style="position:absolute;width:100;height:30;left:100;top:100"> 
<tr> 
<td>bbbbb</td> 
</tr> 
</table>

Answer 4

table{display:inline;} didn't work?

Answer 5

You should use CSS for this, as it is a presentational issue. Why can't you use CSS?

This is how I'd do it. Simple, works in every browser and it easily adapts to surrouding layout elements. Give both tables a width that fits them in the containing element, and float both of them to the left. For example:

<div id="container">
  <table>...</table>
  <table>...</table>
</div>

#container { width: 500px; } 
table { width: 250px; float: left; }

Answer 6

I found it!

One has to use the following settings for both tables:

display: inline-table;

Thanks for the inline, guys, thanks a lot, but at least, inline-table works ^^

Hope I helped...