Как сделать так, чтобы HTML строк таблицы имели одинаковый размер в Haml

Question

У меня есть таблица HTML, созданная с использованием Haml, и я l oop просматривал значения и отображал их. Каждая таблица имеет разную ширину для каждого значения, и я не понимаю, почему.

Haml:

 - if @downtown.properties.present?
    - @downtown.properties.collect do |property|
      .container
        .row.property-panel
          = link_to downtown_property_path(@downtown, property), :action => 'go' do
            %table
              %tr
                %td= property.name
                %td= property.original_construction_year
                %td= property.street_address 
                %td= property.owner_address_state
                %td= property.owner_address_zip
                %td= property.floor_count

CSS:

table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 50px;
}

Это изображение того, с чем я имею дело:

Answer 1

Это было странно. Во-первых, я не знаю, что это произошло, и поэтому вместо того, чтобы решить проблему, я потратил больше времени, пытаясь выяснить, что же происходит.

Я не указал ширину %td, и добавление одного позаботилось о проблеме.

td {
  width: 200px;
}

Answer 2

Может быть, вам следует создать одну таблицу и добавить в нее больше строк вместо того, чтобы создавать новые таблицы и фиксировать ширину данных таблицы.

- if @downtown.properties.present?
  %table
    - @downtown.properties.collect do |property|
      .container
        .row.property-panel
          = link_to downtown_property_path(@downtown, property), :action => 'go' do
            %tr
              %td= property.name
              %td= property.original_construction_year
              %td= property.street_address 
              %td= property.owner_address_state
              %td= property.owner_address_zip
              %td= property.floor_count

Answer 3

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

Переместите определение таблицы из l oop, чтобы решить проблему.