Nano Hash - криптовалюты, майнинг, программирование

Используйте динамический список для отображения таблицы из двух столбцов с чередующимся цветом фона, проблема с разметкой HTML

Я хотел бы создать таблицу с чередующимися цветными строками, где каждая строка имеет два столбца. Кроме того, первая строка в таблице действует как заголовок и пересекает оба столбца.

Я чувствую, что близок к желаемому результату, но список из двух столбцов не отображается должным образом. В настоящее время второй элемент в списке из трех элементов отображается во втором столбце и отображается между элементами 1 и 3. Кроме того, цвет фона строки не растягивается на оба столбца, а вместо этого растягивается прямо вниз в строку под ним. .

Пожалуйста, просмотрите прикрепленный снимок экрана.

Проблема

Желаемый результат

введите здесь описание изображения

.html.haml

%div.mobileLandingPageTable
      %table
        %tr
          %td{:colspan => "2"}
            List
        - @list.each do |company|
          %tr
            %td{:rowspan => "2"}
              = company.company_name

common.sass

.mobileLandingPageTable
  margin: 0px
  padding: 0px
  width: 90%

.mobileLandingPageTable table
  width: 90%
  height: 100%
  margin: 0px
  padding: 0px
  border: 1px solid #a8a8a8
  border-bottom-right-radius: 0px
  border-top-left-radius: 0px
  border-top-right-radius: 0px
  border-bottom-left-radius: 0px

.mobileLandingPageTable tr:nth-child(odd)
  background-color: #ffffff
.mobileLandingPageTable tr:nth-child(even)
  background-color: #d6d0cb

.mobileLandingPageTable td
  border: 1px solid #a8a8a8
  border-width: 0px 1px 1px 0px
  text-align: left
  padding: 7px
  font-size: 10px
  font-family: Arial
  font-weight: normal
  color: #000000


.mobileLandingPageTable tr:last-child td
  border-width: 0px 1px 0px 0px


.mobileLandingPageTable tr td:last-child
  border-width: 0px 0px 1px 0px


.mobileLandingPageTable tr:last-child td:last-child
  border-width: 0px 0px 0px 0px


.mobileLandingPageTable tr:first-child td
  background-color: #002F87
  border: 0px solid #a8a8a8
  text-align: left
  border-width: 0px 0px 1px 1px
  font-size: 12px
  font-family: Arial
  color: #ffffff


.mobileLandingPageTable tr:first-child td:first-child
  border-width: 0px 0px 1px 0px


.mobileLandingPageTable tr:first-child td:last-child
  border-width: 0px 0px 1px 1px

ОБНОВЛЕНИЕ

Я добавил измененный haml, но все еще изо всех сил пытался заставить эти строки иметь только два столбца. Как добавить логику для создания новой строки, если строка уже охватывает два столбца?

%div.mobileLandingPageTable
  %table
    %tr
      %td{:colspan => "2"}
        List
    %tr
    - @list.each do |company|
      %td{:colspan => "1"}
        = company.company_name

Эта модификация теперь имеет одну строку со столбцом для каждого элемента. Я не понимаю, какую логику я могу использовать, чтобы автоматически создавать новую строку после того, как в строке уже присутствуют два объекта.

ruby-on-rails html sass html-table haml
09.10.2014

  • Вы понимаете, что делает rowspan, не так ли? Это чисто проблема разметки, Sass/CSS здесь не задействована. 09.10.2014
  • Я думал, растянул итерацию на два столбца? Что нарушено в разметке? 09.10.2014
  • Почему rowspan охватывает несколько столбцов? Как вы думаете, что тогда делает colspan? 09.10.2014
  • Ах, теперь я понимаю, что вы имеете в виду. Когда я редактировал разметку и использовал :colspan =› 1, он добавлял одну строку для каждого отдельного значения, а не только 1 столбец. Когда я изменил его на rowspan => 2, он создал предполагаемое поведение, но затем растянул цвет фона на две строки. Итак, я получил одно предполагаемое поведение, а другое испортил. 09.10.2014
  • Все еще пытаюсь понять это. Кажется, это проблема с логикой в ​​haml, поскольку нет логики для создания новой строки, когда в строке уже присутствует более двух элементов. Я могу сделать это, изменив переменную экземпляра и создав массив с двумя объектами в каждом индексе, но мне это кажется хакерским. 10.10.2014

Ответы:


1

Я думаю, что вы ищете что-то вроде этого, используя each_slice чтобы получить пары компаний для каждой строки:

%tr
  %td{:colspan => "2"}
    List
[email protected]_slice(2) do |row|
  %tr
    - row.each do |company|
      %td= company.company_name
10.10.2014
  • Стоит отметить, что без добавления colspan к строке только с одним столбцом валидатор HTML выдаст предупреждение о том, что в некоторых строках меньше столбцов, чем в других. 10.10.2014

    • 2

    Я не знаком с Haml, но логика создания вашей таблицы будет примерно такой:

    • Выберите четное количество элементов в списке (если есть нечетное число, удалите последний и сохраните его в переменной)
    • Разделите его на пары (по одной паре в ряду)
    • Цикл по списку без использования rowspan или colspan
    • Прикрепите лишнее в конце и дайте ему colspan

    Однако я считаю, что таблицы не являются семантически правильным выбором для этого типа данных. Таблицы должны быть зарезервированы для табличных данных (если вы хотите отобразить компании, у вас будет только одна компания в строке вместе с другими данными о компании, такими как номер телефона или адрес).

    Семантически правильная разметка для ваших данных будет выглядеть примерно так:

    <h1>Companies</h1>

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

    И минимальное количество CSS для получения желаемого стиля списка будет выглядеть так:

    ul {
  overflow: hidden;
  list-style: none;
  padding-left: 0;
}

li {
  float: left;
  width: 50%;


  &:nth-child(4n+1), &:nth-child(4n+2) {
    background: orange;
  }

  &:nth-child(4n+1), &:nth-child(4n+3) {
    &:last-child {
      clear: both;
      float: none;
      width: auto;
    }
  }
}

    http://codepen.io/cimmanon/pen/mosiu

    10.10.2014
  • Следует отметить, что преимущество использования CSS для этой задачи заключается в том, что его можно сделать адаптивным (т. е. вы можете иметь больше столбцов на более широких устройствах). 10.10.2014
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..