在 HAML/HTML 中对齐表格的列答案

【问题标题】：Align the columns of tables in HAML/HTML在 HAML/HTML 中对齐表格的列
【发布时间】：2017-11-06 21:05:04
【问题描述】：

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

【问题讨论】：

你能显示view 代码吗？因为只要您有正确数量的<td>s，即使这些<td>s 是空的，HTML <table> 也不应该像那样压缩。看到这个DEMO
不看代码就很难提供解决方案stackoverflow.com/help/mcve
@Jay-ArPolidario 我已经编辑了问题并提供了我正在使用的代码结构。

标签： html css ruby-on-rails haml bootstrap-4

【解决方案1】：

我感觉“某事”覆盖了表格单元格 display 值的默认 CSS 值。可能是引导程序？但我只能猜测......

但以下应该有效：

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

【讨论】：

尝试了您的解决方案，但没有帮助。此外，您提供的链接没有工作示例。给定示例中的表格未正确对齐。
@BijayRegmi 是的，我刚刚在一分钟前更新了它；您可以再次单击上面的working example 链接吗？由于 jsfiddle 中似乎存在一些错误
我不知道这是错误还是什么，但我的工作示例链接中的表格仍然未对齐（或者至少这是我的浏览器正在呈现的内容）
@BijayRegmi 您是否尝试在该 工作示例 链接的 HTML 窗格中取消注释 /* UNCOMMENT BELOW TO FIX! */，但没有修复它？之后您必须单击“运行”才能重新处理该页面。
其实我没有。我再次尝试取消注释，并且工作示例对齐表格。但是，我在我的代码上尝试了同样的事情，但我视图中的表格仍然未对齐。我不知道为什么它不适用于我的代码。