Text alignment in columns in jQuery UI accordion headings

Text alignment in columns in jQuery UI accordion headings

I'd like to be able to align some text in the headings of a jQuery UI accordion so that values selected in each panel is summarized and visible... and lined up consistently on all the collapsed panel headings. Here is a sample of more or less what I'd like, but it was accomplished poorly and unreliably by using varying numbers of  s. Additionally, I'd like to add a column on the right edge of the headings with an indication of whether the section is fully completed.




Obviously, when the 4th section has some answers the "Hybrid" and "Cattleya mossiae" and "Cattleya maxima" should have been further to the right if answers are to line up, but I  got tired of adding  s.

What I tried was to put a table in the headings and specify some cell widths that would line things up (unless the entry sizes are uncooperative, but that would be OK). But this interacts poorly with the accordion icon:



When jQuery UI adds the ▸ or ▾ it forces the table to be below it. I've tried various alignment commands to no avail. The code for the heading shown above is this, but trying less than 100% doesn't work either. The H3 is the accordion heading.

  1. <h3 id="interview-poltype-head">
  2. <table width="100%" padding="0" border="0">
  3. <tr>
  4. <td width="34%">Type of Pollination:</td>
  5. <td width="33%">Hybrid</td>
  6. <td width="33%" align="right">&#9989;</td>
  7. </tr>
  8. </table>
  9. </h3>

When the icon gets added, this is what it looks like in the element browser:

  1. <h3 id="interview-poltype-head" class="ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-collapsed ui-corner-all" role="tab" aria-controls="ui-id-1" aria-selected="false" aria-expanded="false" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
  2. <table width="100%" padding="0" border="0">
  3. <tbody><tr>
  4. <td width="34%">Type of Pollination:</td>
  5. <td width="33%">Hybrid</td>
  6. <td width="33%" align="right">✅</td>
  7. </tr>
  8. </tbody></table>
  9. </h3>

Is there any way to tell  the icon/table to be next to each other?

Troy