問題描述
表格內容的對齊方式 (alignment of the content in table)
我需要創建一個如下圖所示的表格。當我加載來自字典的字體真棒圖標時，對齊被寵壞了。我正在努力對齊，就像每列之間的空格和圖標分散，它們應該在操作列下。在此先感謝。
data = [
{
'date':'Nov 1',
'name':"Bengaluru",
'entities': 14,
'details':'Lorem Ipsum , Lorem Ipsum',
'actions':'fa fa‑envelope‑o'
},
{
'date':'Nov 2',
'name':"Hyderabad",
'entities': 17,
'details':'Lorem Ipsum,Lorem Ipsum, Ipsum',
'actions':'fa fa‑envelope‑o'
},
{
'date':'Nov 3',
'name':"Chennai",
'entities': 50,
'details':'Lorem,Lorem Ipsum,Lorem Ipsum',
'actions':'fa fa‑envelope‑o'
},
{
'date':'Nov 4',
'name':"Mumbai",
'entities': 20,
'details':'Lorem Ipsum,Lorem ,Lorem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 5',
'name':"Kerala",
'entities': 10,
'details':'Lorem ,Lorem Ipsum,Lorem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 6',
'name':"Bhopal",
'entities': 4,
'details':'Lorem sum, Ipsum,Lorem sum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 7',
'name':"Indore",
'entities': 54,
'details':'Lorem Ipsum,rem Ipsum,rem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 8',
'name':"Thane",
'entities': 1,
'details':'Lorem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 9',
'name':"Pune",
'entities': 64,
'details':'Lorem Ipsum,Lorem Ipsum,Pune',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 10',
'name':"Kutch",
'entities': 224,
'details':'Lorem Ipsum,PrivateCircle,Lorem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 11',
'name':"Bengaluru",
'entities': 114,
'details':'PrivateCircle,Lorem Ipsum,Lorem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 12',
'name':"J&k",
'entities': 214,
'details':'Lorem Ipsum,PrivateCircle,Lorem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 13',
'name':"Punjab",
'entities': 134,
'details':'Lorem PrivateCircle,Lorem Ipsum,Lorem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 14',
'name':"Bengaluru",
'entities': 144,
'details':'Lorem Ipsum,Lorem Ipsum,LoPrivateCircleum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 15',
'name':"Kolkata",
'entities': 154,
'details':'Lorem Ipsum,LoPrivateCirclesum,Lorem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 16',
'name':"Delhi",
'entities': 164,
'details':'Lorem Ipsum,PrivateCirclem,Lorem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 17',
'name':"Mysuru",
'entities': 14,
'details':'PrivateCircle,Lorem Ipsum,Lorem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 19',
'name':"Vizag",
'entities': 154,
'details':'Lorem Ipsum,Lorem Ipsum,PrivateCircle',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
},
{
'date':'Nov 12',
'name':"Agra",
'entities': 14,
'details':'Lorem Ipsum,Pune,Lorem Ipsum',
'actions':'fa fa‑envelope‑o,fa fa‑share‑alt,fa fa‑trash‑o,fa fa‑pencil'
}]<div class="container‑fluid">
<section class="row">
<div class="col‑md‑9 col‑12 overflow‑auto scroll">
<table class="table table‑hover">
<tr>
<th class="text">Date</th>
<th class="text">List Name</th>
<th class="text">No. of Entities</th>
<th class="text">Actions</th>
<th class="text"></th>
</tr>
<tbody>
<tr *ngFor="let items of data">
<td class="text‑dark font‑weight‑bold">{{ items.date }}</td>
<td class="text‑dark font‑weight‑bold">{{ items.name }}</td>
<td class="text‑dark font‑weight‑bold">{{ items.entities }}</td>
<td *ngFor="let x of items.actions.split(',')"><i class="{{x}}"></i></td>
<td>
<button type="button" class="btn btn‑outline‑secondary" (click)="getdetails(items)">
Details
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col‑md‑3 col‑12 overflow‑auto scroll ">
<div class="alert alert‑dark"><span class="text">No description yet</span> <span class="font‑weight‑bold sidedivtext">+Add Description</span> </div>
<p *ngFor="let str of s" class="text‑center text‑primary">{{str}}</p>
</div>
</section>
</div>
Let me know if you still have issue.