Jquery Accordion With Table inside

I'm trying to accomplish the following:

<div id="accordion">
<% i = 0 %>
        @handle_paises.each do |pais|          
            @handle_publi_pais = Paquete.paque_pais(pais.id_pais)
            if !@handle_publi_pais.blank? %>
              <h3><a href="#"><%= pais.nombre %></a></h3>
              <div class="section">
                <table border="0" cellspacing="0" cellpadding="0" id="paque_tr_5">
                  <%@handle_publi_pais.each do |pais_cargado|%>
                      <tr>
                        <td width="71%" align="left" valign="top" id="paque_tr_1">
                          <%= pais_cargado.nombre_promocion.to_s %>
                        </td>
                        <td width="10%" align="center" valign="bottom" id="paque_tr_3">
                          <a href="xxx" title="yyy">
                            <img src="yyy"  width="26" height="18" border="0"/>
                          </a>
                        </td>
                      </tr>
                    <% i += 1 end%>
                </table>
              </div>
            <% end%>
</div>

however, each section is rendered with a HUGE height (which is added I don't know how to the (and no, this class doesn't have any entry on any css file)

Why is this happening?

Thanxxx

UPDATE:

this is the output of the

<div class="section ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 663.6px;" role="tab开发者_C百科panel">

Here's the JSFIDDLE: http://jsfiddle.net/GaqLZ/2/

heightStyle: "fill" is the property you're looking for.

$( "#accordion" ).accordion({ collapsible: true, heightStyle: "fill" });

I believe what you're looking for is the autoHeight option:

$(function() {
    $("#accordion").accordion({autoHeight: false, collapsible: true});    
});

autoHeight defaults to true and makes all of the div's the same size. So it looks for the one that is the tallest, and uses that height for every single one. autoHeight: false makes each individual div only as tall as it's content.

You can add the collapsible: true property if you want the individual nodes to be close-able after opening them.