Перенос последней ячейки в таблице в новую строку с помощью гибкой основы active

ProgramBox

Перенос последней ячейки в таблице в новую строку с помощью гибкой основы active

Post author:admin
Запись опубликована:1 сентября, 2022
Post category:Вопросы по программированию

#html #css #html-table

#HTML #css #html-таблица

Вопрос:

Я пытаюсь получить уникальную ячейку таблицы для переноса в новую строку шириной 100%. Проект использует flex в таблице, поэтому я безуспешно пробовал другие методы, такие как colspan.

Редактировать: у меня есть директива angular в <tr> , поэтому это затрудняет простое добавление нового <tr>

Я надеялся, что кто-нибудь сможет мне в этом помочь. Простая структура проекта выглядит так:

     <tr *ngIf="exampleFunction">
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td>data</td>
        <td class="special">data</td>
    </tr>

Ссылка на скрипку приведена ниже.

https://jsfiddle.net/o4Luzbju/

1. Обязательно ли использовать flex или возможны другие варианты CSS?

2. К сожалению, база кода использует flex. Вот почему я как бы привязан к этому.

3. почему бы не использовать теги <br> в вашем контейнере td для перехода на новую строку? .. также вы хотели бы перейти на новую строку или новую строку ?.. взгляните на свой заголовок и информацию в вашем вопросе …. новая строка или новая строка ?….

4. Спасибо за этот catch @repzero, я обновил заголовок

Ответ №1:

Отображение строк таблицы в виде многострочных контейнеров flex. Используйте flex , чтобы ячейки распределяли пространство равномерно, но принудительно 100% увеличивали ширину специальной ячейки.

 table {
  width: 100%;
}
tr {
  display: flex;
  flex-wrap: wrap;
}
td {
  flex: 1;
  border: 1px solid grey;
}
.special {
  flex-basis: 100%;
  box-sizing: border-box;
}

 <table>
  <thead>
    <tr>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td class="special">special data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td class="special">special data</td>
    </tr>
  </tbody>
</table>

Ответ №2:

Нет смысла использовать таблицу для выполнения того, что вы хотите. Если вы хотите, чтобы эта ячейка была отдельной новой строкой, тогда она должна быть внутри своей собственной <tr></tr> .

Используйте div вместо таблиц, которые намного лучше адаптированы к вашей ситуации.

1. чтобы добавить контекст, в <tr> есть директива angular, поэтому выход из этого приведет к тому, что новый tr выйдет из области видимости

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

Ответ №3:

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

пример

 table {
  width: 100%;
}
td {
  flex: 100%;
  flex-basis: 200px;
  min-width: 200px;
  border: 1px solid grey;
}
.special {
  text-align: center;
}
#null {
  border: none
}

 <table>
  <thead>
    <tr>
      <th>header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td>data</td>
      <td id='null'></td>
    </tr>
    <tr>
      <td class="special">Special data</td>
    </tr>
  </tbody>
</table>

1. Зачем вам нужна нулевая ячейка?

2. Я использую идентификатор с именем ‘null’ (проводил некоторый эксперимент).. На самом деле я помню, что я помещаю это туда, чтобы применить правило css border none, чтобы скрыть эту границу, чтобы она выглядела как разрыв строки

Ответ №4:

Вы можете установить строку таблицы ( <tr> ) в качестве контейнера flex с возможностью переноса элементов в новую строку.

Затем установите td.special начальную ширину равным 100%.

 table {
  width: 100%;
}

tr {
  display: flex;   /* Initiate flexbox on the container */
  flex-wrap: wrap; /* Let flex items wrap to new line */
}

td {
  flex: 1 0 auto;  /* Flex item to grow to available width */
  border: 1px solid grey;
}

td.special {
  flex: 1 0 100%;  /* Flex item's initial width to be 100% */
}

Метки: Перенос последней ячейки в таблице в новую строку с помощью гибкой основы active