对齐 HAML/HTML 中表格的列

Question

我正在制作动态填写的 table。动态填写内容时，可以得到null objects。当我得到 null objects 时，HTML table 没有正确对齐。例如我想创建一个 table 如下：

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

但目前，table 看起来如下：

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

我看过的其他解决方案需要在存在空 object 时插入字符。如果我采用这种方法，那么对于每一列，我都必须检查给定的值是否为空，如果为空，则插入字符。我认为必须有一些其他有效的方法来做到这一点。有人可以帮我处理这个案子吗？

P.S：这是 Rails 项目上的 Ruby，我正在使用 HAML 和 Bootstrap 创建视图。此外，我的内容行包含一些额外的按钮，即 headers 行包含的列少于内容行

下面是我用来创建 table 的代码。

%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'

Answer 1

我感觉 "something" 已经覆盖了 table 单元格的 display 值的默认 CSS 值。大概是Bootstrap？但我只能猜测...

但以下应该有效：

app/assets/ANY_SCSS_FILE.scss

table.show-empty-cells {
  td:empty {
    display: table-cell !important;
  }
}

然后将 .show-empty-cells class 用于您的 table：

%table.table.table-hover.table-responsive.show-empty-cells

见working example here

对齐 HAML/HTML 中表格的列

Align the columns of tables in HAML/HTML

html

css

ruby-on-rails

haml

bootstrap-4