Блог

Главная - Вопросы по программированию - Сгруппировать ячейки таблицы вместе в html с помощью ul li?

Сгруппировать ячейки таблицы вместе в html с помощью ul li?

#html #html-lists

#HTML #html-списки

Вопрос:

Я хочу создать что-то подобное, но без tr-й атрибутов html, поскольку в моей таблице я использую только атрибуты ul и li

  ----------------------- 
|   one joint column    |
 ----------------------- 
|  5  |  6  |   joint   | 
 ----------------------- 
|  9  |  10 |  11 | 12  |
 -----------------------

Заранее спасибо

Обновить

вот мой фрагмент кода :

 <li class="cell"> 1min
    <div ng-repeat="load1min in cpu.data1mnList | orderBy:'idEquipment'">
        <span class="bolded_span">
            {{(load1min.value).toFixed(3)}}
        </span>

    </div>
</li>
<li class="cell"> 5min
    <div ng-repeat="load5min in cpu.data5mnList  | orderBy:'idEquipment'">
        <span class="bolded_span">
            {{(load5min.value).toFixed(3)}}
        </span>
    </div>

</li>
<li class="cell"> 15min
    <div ng-repeat="load15min in cpu.data15mnList  | orderBy:'idEquipment'">
        <span class="bolded_span">
            {{(load15min.value).toFixed(3)}}
        </span>
    </div>
</li>

Я хочу сгруппировать эти 3 ячейки с одним заголовком над ними

Комментарии:

1. Можете ли вы продемонстрировать какие -либо усилия по решению этой проблемы самостоятельно?

2. Если ваши данные табличные, вы должны использовать tables, если ваша дата представляет собой список, ul / li должно быть достаточно. Почему вы используете этот подход?

3. Вот что я сделал: ibb.co/sC1KZB1 , вот каким должен быть результат: ibb.co/J5qh9wN . Попробовал несколько трюков с css, но в итоге я всегда группирую 3 столбца в один

4. где ваш код?

5. Я опубликовал обновление

Ответ №1:

Используя CSS flex

 .flex {
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}

.flex > * { flex-basis: 100%; }
.span-1 { flex-basis: 25%; }
.span-2 { flex-basis: 50%; }

li { background: gold; }  
 <ul class="flex">
  <li>one joint column</li>
  <li class="span-1">5</li>
  <li class="span-1">6</li>
  <li class="span-2">joint</li>
  <li class="span-1">9</li>
  <li class="span-1">10</li>
  <li class="span-1">11</li>
  <li class="span-1">12</li>
</ul>

Другой способ:

 .flex {
  padding: 0;
  list-style: none;
  display: flex;
  flex-flow: row wrap;
}

.flex > * { flex-basis: 25%; }
.span-2 { flex-basis: 50%; }
.span-4 { flex-basis: 100%; }

.flex li { background: gold;}  
 <ul class="flex">
  <li class="span-4">one joint column</li>
  <li>5</li>
  <li>6</li>
  <li class="span-2">joint</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
</ul>

Комментарии:

1. Большое спасибо, чувак! просто вопрос, почему text-align: center; на самом деле не центрирует этот один объединенный столбец?

2. @akadri01 используется .flex li {text-align: center;} для выравнивания текста по центру

3. Это то, что я сделал, это был уокинг, просто я не понял это правильно, большое спасибо, чувак!