代码之家  ›  专栏  ›  技术社区  ›  Bijay Regmi

在HAML/HTML中对齐表格的列

  •  -1
  • Bijay Regmi  · 技术社区  · 8 年前

    我正在制作一个动态填写的表格。当动态填充内容时,我可以得到空对象。当我得到空对象时,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字符。如果我遵循这种方法,那么对于每个列,我必须检查给定的值是否为null,并插入&如果为空,则返回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'
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   Jay-Ar Polidario    8 年前

    我感觉“something”已经覆盖了表单元格的默认CSS值 display 价值可能是自举?但我只能猜测。。。

    但以下几点应该有效:

    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