How to remove the extra space from table in following scenario?

Question

I'm using Smarty for my website. I'm parsing through an array to print the data into a HTML table. Following is the smarty code:

{if $practice_details}
<h2 align="center">Answer Key</h2>

  {foreach from=$practice_details item=practice_sheet_data key=subject_name}
    {foreach from=$practice_sheet_data.topics item=topic_details}
      <br/>
<table border="0" width="100%" cellpadding="0" cellspacing="0" border="0">
  <tbody>
    <tr>
      <td style="background:#eee;"><b>{$subject_name} - {$topic_details.topic_name}</b></td>
    </tr>
  </tbody>
</table>
<table border="0" width="100%" cellpadding="0" cellspacing="0" align="left">
    <tr>
          {if $topic_details.practice_topics_ques}
              {assign var='que_seq_no' value=1}
                {assign var='count' value=1}
              {foreach from=$topic_details.practice_topics_ques  item   = question_data}

                    {foreach from=$question_data item=qstn_ans key=key}
            {if $qstn_ans.question_has_sub_ques==0}
              {if $qstn_ans.answer}
                {foreach from=$qstn_ans.answer item=ans key=ans_no}
                  {if $ans.answer_is_right==1}{assign var='correct_ans' value=$ans_no+1}{/if}
                {/foreach} 
      <td>
                {if $count % 10 == 1}Q&nbsp;{/if}{if $count % 10!=1}&nbsp;{/if}{$que_seq_no}<br/>{if $count % 10 == 1}A&nbsp;{/if}{if $count % 10!=1}&nbsp;{/if}{$correct_ans}

      </td>     {assign var='que_seq_no' value=$que_seq_no+1}

                  {if $count % 10 == 0} 
    </tr><tr><td></td></tr>
                    {/if}
                    {assign var='count' value=$count+1} 
                {/if}
            {else}
                {if $qstn_ans.question_has_sub_ques==1 && $qstn_ans.sub_question}
                    {foreach from=$qstn_ans.sub_question item=sub_ques_ans key=sub_ques_no}
                      {if $sub_ques_ans.answer}
                            {foreach from=$sub_ques_ans.answer item=sub_ans key=sub_ans_no}
                      {if $sub_ans.answer_is_right==1} 
                        {assign var='correct_sub_ans' value=$sub_ans_no+1} 
                      {/if}
                    {/foreach}

      <td>
                    {if $count % 10 == 1}<b>Q</b>&nbsp;{/if}{if $count % 10!=1}&nbsp;{/if}{$que_seq_no}.{$sub_ques_no+1}<br/>{if $count % 10 == 1}<b>A</b>&nbsp;{/if}{if $count % 10!=1}&nbsp;{/if}{$correct_sub_ans}</td>
                    {assign var='que_seq_no' value=$que_seq_no+1}
                        {if $count % 10 == 0}   
                    </tr><tr><td></td></tr>
                        {/if}
                    {assign var='count' value=$count+1}                    
                  {/if}    
                {/foreach}
              {/if}
            {/if}               
          {/foreach}
        {/foreach}
      {/if}
    </tr>
    </table>
    {/foreach}
  {/foreach}
{/if}

For your reference I've attached a js fiddle link also: enter link description here If you look at the output, it's printing perfectly but there is uneven horizontal spacing between the data elements. Can anyone please help me in correcting my smarty template code to print the data within table with equal horizontal spacing in between them(i.e. only a single space between two data items).

Thanks in advance.

Answer 1

You need to fix your width. It's very strange that you are building everything as a table and using td even for headers. I will recommend you to think about table restructuring.

However for the current code you can go for the following css

table td
{
   min-width:100px; //change width according to your own need
   display:inline-block;
} 

By default table has display:table-cell property. But it doesn't accomodate width attribute very well. So I am changing it to display:inline-block.

Fiddle: http://jsfiddle.net/ankur1990/7xFfa/1/