bootstrap выравнивание нескольких таблиц

115
26 октября 2021, 15:30

ищу помощи по правильному формированию списков характеристик товара, остановился на отображении в виде таблицы, однако имею неприятность с выравниванием. стиль использую Bootstrap'a -> Отображаю Angular'ом

в результате получаю как на скриншоте скриншот

Мб я вообще в корне, строю отображение не правильно?

таблицу строю так

<table class="table" *ngFor="let specification of details.specifications">
  <thead class="thead-light">
    <tr>
      <th scope="col" colspan="2">{{specification.section}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let spec of specification.specifications">
      <td>{{spec.name}}</td>
      <td class="font-weight-bold text-success">
        {{spec.value}}</td>
    </tr>
  </tbody>
</table>

модель данных для примера

{
  "id": 1,
  "name": "Материнская плата Gigabyte GA-Z270P-D3 Soc-1151 Intel Z270 4xDDR4 ATX AC`97 8ch(7.1) GbLAN RAID+HDMI",
  "specifications": [
    {
      "section": "Поддержка дисков",
      "specifications": [
        {
          "name": "Поддержка RAID 10",
          "value": "Да",
          "sorting": 25
        },
        {
          "name": "Поддержка RAID 5",
          "value": "Да",
          "sorting": 24
        },
        {
          "name": "Поддержка RAID 1",
          "value": "Да",
          "sorting": 23
        },
        {
          "name": "Поддержка RAID 0",
          "value": "Да",
          "sorting": 22
        },
        {
          "name": "Поддержка RAID",
          "value": "ДА",
          "sorting": 21
        }
      ]
    },
    {
      "section": "Память",
      "specifications": [
        {
          "name": "Слотов памяти DDR4",
          "value": "4",
          "sorting": 18
        },
        {
          "name": "Частотная спецификация памяти",
          "value": "2400",
          "sorting": 14
        },
        {
          "name": "Поддержка частот оперативной памяти",
          "value": "3866(O.C.) / 3800(O.C.) / 3733(O.C.) / 3666(O.C.) / 3600(O.C.) / 3466(O.C.) / 3400(O.C.) / 3333(O.C.) / 3300(O.C.) / 3200(O.C.) / 3000(O.C.) / 2800(O.C.) / 2666(O.C.) / 2400 / 2133 МГц",
          "sorting": 13
        },
        {
          "name": "Максимальный объем оперативной памяти",
          "value": "64",
          "sorting": 15
        },
        {
          "name": "Режим работы оперативной памяти",
          "value": "двухканальный",
          "sorting": 16
        },
        {
          "name": "Поддержка Intel Optane",
          "value": "ДА",
          "sorting": 1048
        },
        {
          "name": "Тип поддерживаемой памяти",
          "value": "DIMM",
          "sorting": 12
        }
      ]
    },
    {
      "section": "Процессор",
      "specifications": [
        {
          "name": "Northbridge",
          "value": "Intel Z270",
          "sorting": 6
        }
      ]
    },
    { ... и далее }
  ]
}
Answer 1

Добавьте col- * для td. Например так:

<tr *ngFor="let spec of specification.specifications">
  <td class="col-4">{{spec.name}}</td>
  <td class="font-weight-bold text-success col-8">
    {{spec.value}}</td>
</tr>

Должно помочь

READ ALSO
Съезжает элемент в CSS

Съезжает элемент в CSS

при выборе вариативного товара в woocommerce, надпись очистить неправильно отображается, плывет https://apphoneru/product/iphone-xs-max-512gb-zolotoj/ хотя вот на этом...

98
Как в Flask отобразить Excel в браузере

Как в Flask отобразить Excel в браузере

Приложение формирует эксель-файл и сохраняет файл в папке на сервереНеобходимо отобразить его в браузере (т

120
Какие HTML теги моветон?

Какие HTML теги моветон?

Какие HTML теги при оформлении css считается моветон ?

88