Question

我一直在玩FreeMarker和html。在我的.freemarker文件中，我得到了一个数字列表。我正在使用表格来显示这些数字。我希望它们一个接一个地水平显示。现在他们在中间留下了一个很大的空间。我只是希望它们以逗号分隔，彼此相邻。我知道这比Freemarker更像是一个HTML问题，但我想提一下我是如何得到我的数字的。

<table style="text-align: center; background-color: #fcc;    
padding: 6px; font-family: Verdana,sans-serif; width: 80%;">

  <tr>
     <#list failedIds as id>
        <td>${id}</td>
     </#list>

  </tr>
</table>

谢谢。

Answer 1

只需从width: 80%样式中移除table，id将一个显示在另一个旁边。这是因为通过从表中删除宽度，我们允许它折叠所有额外的空间，并且仅使用所需的宽度。

如果您需要80%宽度作为设计的一部分，则可以使用div将其包装在width: 80%中。由于您指定了您不想使用外部CSS，因此所有以下样式都是内联的。

现场演示：

＆＃13;

<div style="background: gray; width: 80%">
  <table style="text-align: center; background-color: #fcc;    
padding: 6px; font-family: Verdana,sans-serif;">
    <tr>
      <td>id,</td>
      <td>id,</td>
      <td>id,</td>
      <td>id,</td>
      <td>id,</td>
      <td>id</td>
    </tr>
  </table>
</div>

＆＃13;

Answer 2

尝试使用我编写的代码。似乎按照你需要的方式工作。

如果你需要保持元素的宽度，我只是将width属性从table标签更改为div标签。

＆＃13;

<div style="width:80%">
  <table style="text-align: center; background-color: #fcc;    
  padding: 6px; font-family: Verdana,sans-serif;">

    <tr>
       <#list failedIds as id>
          <td>${id},</td>
       </#list>

    </tr>
  </table>
</div>

＆＃13;

Answer 3

我在@Luiz的帖子中看到了你的评论，该帖子表明你希望在达到一定长度后将行换行。获取一个表格行是相对困难的（它不是真正的表格所针对的），所以这里有一个解决方案，通过使用span s来实现您正在寻找的内容而不是使用表格。当超出其div容器的尺寸时，您可以看到该行包装成新行。

同样，这是使用完全内联样式作为对@ wi_marti的回答请求的评论。

现场演示：

＆＃13;

<div style="background-color: #fcc;    
padding: 6px; font-family: Verdana,sans-serif; width: 30%;">
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id,</span>
      <span>id</span>
</div>

＆＃13;

您的最终Freemarker代码可能看起来像这样：

<div style="background-color: #fcc;    
padding: 6px; font-family: Verdana,sans-serif; width: 30%;">
 <#list failedIds as id>
    <span>${id},</span>
 </#list>
</div>

Answer 4

你可以尝试一些CSS：

table {
border-collapse: collapse;
border-spacing: 0;
padding: 0;
}

table td, 
table th{
padding: 0; 
}

如何从HTML表格中的表格单元格中删除空格

4 个答案: