【问题标题】:How to remove the extra space from table in following scenario?在以下情况下如何从表中删除多余的空间?
【发布时间】:2023-03-07 19:13:01
【问题描述】:

我正在为我的网站使用 Smarty。我正在解析一个数组以将数据打印到 HTML 表中。以下是 smarty 代码:

{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}

为了您的参考,我还附上了一个 js fiddle 链接: enter link description here 如果您查看输出,它打印完美,但数据元素之间的水平间距不均匀。谁能帮我纠正我的 smarty 模板代码以打​​印表格中的数据,它们之间的水平间距相等(即两个数据项之间只有一个空格)。

提前致谢。

【问题讨论】:

  • 它取决于列数。因为你没有在列上设置任何标准,它会自动调整宽度
  • @AnkurAggarwal:那怎么改正呢?
  • 查看下面的答案

标签: html foreach smarty html-table spacing


【解决方案1】:

您需要固定宽度。很奇怪,您将所有内容都构建为表格,甚至将 td 用于标题。我会建议你考虑表重组。

但是对于当前代码,您可以使用以下 css

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

默认情况下,表格具有 display:table-cell 属性。但它不能很好地适应宽度属性。所以我将其更改为 display:inline-block

小提琴:http://jsfiddle.net/ankur1990/7xFfa/1/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2011-01-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-02-19
    • 1970-01-01
    • 2022-12-22
    • 1970-01-01
    相关资源
    最近更新 更多