如何从 HTML table 中的 table 个单元格中删除 space

Question

我一直在玩弄 FreeMarker 和 html。在我的 .freemarker 文件中，我得到了一个数字列表。我正在使用 table 来显示这些数字。我想让它们一个接一个地水平显示。现在他们在中间留下了一个大 space。我只希望它们彼此相邻，用逗号分隔。我知道这比 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

你可以试试 CSS:

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

table td, 
table th{
padding: 0; 
}

Answer 2

只需从 table 样式中删除 width: 80%，id 就会一个接一个地显示。这是因为通过移除 table 的宽度，我们允许它折叠所有额外的 space 并且只用完所需的宽度。

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

现场演示：

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

Answer 3

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

我刚刚将宽度属性从 table 标记更改为 div 标记，如果您需要保持元素的宽度。

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

Answer 4

我看到您对@Luiz 的post 的评论，其中指出您希望该行在达到一定长度后换行。将 table 行换行相对困难（这并不是 table 的真正含义），因此这是一个通过使用 [=12 来实现您正在寻找的解决方案=]s 而不是使用 table。您可以看到，当该行超出其 div 容器的尺寸时，该行换行到一个新行中。

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

现场演示：

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

您最终的 Freemarker 代码可能如下所示：

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

如何从 HTML table 中的 table 个单元格中删除 space

How to remove space from table cells in an HTML table

html

freemarker