Table alignment problem

JSFiddle

For some reason, the left table takes up more space than it should, forcing the right table to the right part of the page. I want the text just to the right of the border encapsulating the AAA and BBB开发者_Python百科 td's.

Should be an easy problem, but haven't be able to solve this problem despite my best efforts.

You could use

<td width="100%">

for the 2nd column of your main table to force this one to the maximum available width. See here.

But your example contains invalid HTML. You shouldn't use <hr /> outside of a <td>. Also, if you do not display tabular data you should use markup without using <table>.

Isnt this a long text without any spaces problem. Normally content have space (regular word boundaries). Try putting in some space in your text (AAAAA) and then check.

If you remove the width=100% from the table tag the right column will go to the left.

This is what is showing for me after i do this.