Выровняйте столбцы таблиц в HAML / HTML

Bijay Regmi спросил: 13 октября 2017 в 07:25 в: html

Я делаю таблицу, которая заполняется динамически. При динамическом заполнении содержимого я могу получить нулевые объекты. Когда я получаю нулевые объекты, HTML-таблица не выравнивается должным образом. Например, я хочу создать таблицу следующим образом:

    Header1       Header2        Header3       Header4
                  Content12                    Content14
    Content21                    Content23     Content24
    Content31     Content32                    Content34

Но в настоящее время таблица выглядит следующим образом:

    Header1       Header2        Header3       Header4
    Content12     Content14
    Content21     Content23      Content24
    Content31     Content32      Content34

Другие решения что я рассмотрел, необходимо вставить символ & nbsp, когда есть нулевой объект. Если я придерживаюсь этого подхода, то для каждого столбца я должен проверить, является ли данное значение нулевым или нет, и вставить символ & nbsp, если он нулевой. Я думаю, что должен быть какой-то другой эффективный способ сделать это. Может ли кто-нибудь помочь мне в этом деле?

P.S: Это проект Ruby on Rails, и я использую HAML и Bootstrap для создания представлений. Кроме того, строки моего содержимого содержат несколько дополнительных кнопок, то есть строка заголовков содержит меньше столбцов, чем строка содержимого

Ниже приведен код, который я использовал для создания таблицы.

%table.table.table-hover.table-responsive
  %thead
    %tr
      %th ID
      %th Header1
      %th Header2
      %th Header3
      %th Header4
  %tbody
    -@given_objects.each do |obj|
      %tr
        %td= obj.id
        %td= obj.content1
        %td= obj.content2
        %td= obj.content3
        %td= obj.content4
        %td= link_to 'action1', action1_path(obj), class: 'btn btn-primary'
        %td= link_to 'action2', action2_path(obj), class: 'btn btn-primary'
        %td= link_to 'action3', action3_path(obj), class: 'btn btn-primary'


0 ответов