html - 在 HAML/HTML 中对齐表的列

Question

我正在制作一个动态填写的表格。动态填写内容时，我可以获得空对象。当我得到空对象时，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

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

P.S:这是一个 Ruby on Rails 元素，我使用 HAML 和 Bootstrap 来创建 View 。此外，我的内容行包含一些额外的按钮，即标题行包含的列少于内容行

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

%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

我有一种感觉，“某些东西”覆盖了表格单元格的 display 值的默认 CSS 值。可能是 Bootstrap ？但我只能猜测...

但以下应该有效:

app/assets/ANY_SCSS_FILE.scss

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

然后为您的表格使用 .show-empty-cells 类:

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

参见 working example here