將填充添加到引導表格單元格

Question

我有一個應用程序和一個小UI。我對錶單元格有一些格式問題，特別是當單元格中的數據太多而無法適應第一行並且溢出時。

這裏是詳細信息：1. 通過引導/ Bootswatch模板（引導3.0）

問題： 我顯示錶（下面的代碼），每一行是我從jinja2模板生成的鏈接列表。在<td></td>中有幾個項目的東西都是對齊的，但是如果我有更多的項目，那麼它會溢出並且 按鈕傾向於重疊並觸摸教其他項目。

我正在尋找一種方法來保持一些對齊單元格，而不管我在該行上顯示多少個按鈕並在按鈕之間保留一些填充。

代碼片段

`

<table class="table table-striped table-hover"> 
<thead> 
<th> Environment </th><th>Roles</th> 
</thead> 
<tbody> 
<tr> 
<td> 
<h5>Some Label</h5> 
</td> 
<td> 
<a href="/connect/url/DUMMY/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" >DUMMY</a> 
<a href="/connect/url/DUMMY1/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" >DUMMY1</a> 
<a href="/connect/url/DUMMY2/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" >DUMMY2</a> 
<a href="/connect/url/DUMMY3/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" >DUMMY3</a> 
</td> 
</tr> 
<tr> 
<td> 
<h5>Another</h5> 
: 
</td> 
</tr> 
</tbody> 
</table> 

Answer 1

好的，我發現了一個獲得方式格式化通過設置LINE-HEIGHT

<td style="LINE-HEIGHT:50px"> 

正確所以這個固定我的格式問題：

<td style="LINE-HEIGHT:50px"> 
<a href="/connect/url/DUMMY/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" >DUMMY</a> 
<a href="/connect/url/DUMMY1/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" >DUMMY1</a> 
<a href="/connect/url/DUMMY2/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" >DUMMY2</a> 
<a href="/connect/url/DUMMY3/" class="btn btn-info" data-toggle="tooltip" 
    data-placement="top" title="... test title" >DUMMY3</a> 
</td> 

Answer 2

嘗試這種情況：

<td clas="pt-5"> </td> <!--Padding 5 units on top--> 
 
<td clas="pb-5"> </td> <!--Padding 5 units on bottom--> 
 
<td clas="pr-5"> </td> <!--Padding 5 units on right--> 
 
<td clas="pl-5"> </td> <!--Padding 5 units on left--> 
 

 
<td clas="mt-5"> </td> <!--Margin 5 units on top--> 
 
<td clas="mb-5"> </td> <!--Margin 5 units on bottom--> 
 
<td clas="mr-5"> </td> <!--Margin 5 units on right--> 
 
<td clas="ml-5"> </td> <!--Margin 5 units on left-->