如何從HTML表格中的表格單元格中刪除空格

我一直在玩FreeMarker和html。在我的.freemarker文件中，我得到一個數字列表。我正在使用一個表來顯示這些數字。我希望他們一個接一個地水平顯示。現在他們在中間留下了一個大空間。我只是希望他們彼此相鄰，用逗號隔開。我知道這是一個比Freemarker更多的HTML問題，但我想提一下如何獲取我的數字。如何從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>

謝謝。

來源

2015-09-21 danilo

我看到@路易斯的帖子，指出要該行獲得到一定長度後，包裝你的評論。獲得一個錶行來包裝會比較困難（這不是真正意義上的表），所以這裏有一個解決方案，通過使用span而不是使用表來實現您正在尋找的內容。當它超過其容器的尺寸時，可以看到該行換行成新的行。

同樣，這是使用完全內聯樣式作爲您對@ 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>

來源

2015-09-21 21:56:35

非常感謝。這正是我需要的。 – danilo

你可以嘗試一些CSS：

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

table td, 
table th{ 
padding: 0; 
}

來源

2015-09-21 20:01:44

因爲我不想用css這種特殊情況下。 – danilo

只需從table風格刪除width: 80%和id s將會顯示一個緊挨着另一個。這是因爲通過從表中刪除寬度，我們允許它摺疊所有額外的空間，並只用盡所需的寬度。

如果您需要這種寬度作爲您的設計的一部分，可以用width: 80%將其包裝在div中。由於您指定了不想使用外部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>

來源

2015-09-21 20:05:46

謝謝你的回答。你有沒有機會知道這個開拓性的例子，如何檢查該行何時達到極限是最好的方法。我想說的是，我不會得到多少數字，所以如果我得到太多的數字，我不想排長隊。有一種方法可以在它們中的一個達到一定寬度後開始新行？ – danilo

@danilo請參閱我的[其他答案]（http://stackoverflow.com/a/32705143/2234742），它顯示了一種不同的方法，它使用'span'來代替表格。 –

嘗試使用我寫的代碼。似乎以你需要的方式工作。

如果您需要保持元素的寬度，我只是將表格標記的width屬性更改爲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>

來源

2015-09-21 20:15:11

如何從HTML表格中的表格單元格中刪除空格

回答

相關問題