выравнивание содержимого в таблице

Question

Мне нужно создать таблицу, как показано на рисунке ниже. Выравнивание получилось испорченным, когда я загрузил шрифт потрясающими иконками, идущими из словаря. я изо всех сил пытаюсь сделать выравнивание как пробелы между каждым столбцом и значки разбросаны, они должны быть под столбцом действий. заранее спасибо.

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> &nbsp; <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>

ссылка на стек

Answer 1

не используйте *ngFor на <td>, используйте это следующим образом.

<td>
    <span *ngFor="let x of items.actions.split(',')">
        <i class="{{x}}"></i>
    </span>
</td>

Дайте мне знать, если у вас все еще есть проблема.