Реорганизация строк таблицы CSS

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

HTML, который я использовал

.tablebodyclass tr {
  top: auto;
  bottom: 0px;
}

.tablebodyclass tr:last-of-type {
  top: 0px;
  bottom: auto;
}

<table class = "table">
  <tbody class = "tablebodyclass">

    <tr class = "no-stripe hidden" style = "display: table-row;">
      <td class = "align-right" colspan = "3">bla bla1</td>
    </tr>
    <tr class = "no-stripe hidden" style = "display: table-row;">
      <td class = "align-right" colspan = "3">bla bla2</td>
    </tr>
    <tr class = "no-stripe hidden" style = "display: table-row;">
      <td class = "align-right" colspan = "3">bla bla3</td>
    </tr>
    <tr class = "no-stripe hidden" style = "display: table-row;">
      <td><strong>THIS needs to be first</strong> </td>
      <td class = "align-right" colspan = "2">xxxxxx
    </tr>
  </tbody>
</table>

https://jsfiddle.net/3ow0mrvy/1/

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

--эндо

Вы можете использовать структуру div с display: flex; и закажите свойство или jquery для этого!

— 10.12.2018 15:14

@CodeGator, к сожалению, я не могу изменить html, поэтому у меня только css

— 10.12.2018 16:09

css html-table

10.12.2018 15:06

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

110

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы не можете изменить порядок строк, используя только CSS. Здесь вам могут помочь jQuery или flexbox. Однако, чтобы имитировать это с помощью чистого CSS, вы можете добавить поле к верхней строке, а затем установить для последней строки значение position: absolute, чтобы она отображалась сверху:

.tablebodyclass tr {
  top: auto;
  bottom: 0px;
}

.tablebodyclass tr:last-of-type {
  top: 0px;
  bottom: auto;
}

tr:last-of-type {
  position: absolute;
}

tr:first-of-type {
  margin-top: 14px;
}

<table class = "table table-condensed table-hover table-vertical-middle table-shop table-stack-phone">
  <tbody class = "tablebodyclass">
    <tr class = "no-stripe hidden" style = "display: block;">
      <td class = "align-right" colspan = "3">bla bla1</td>
    </tr>
    <tr class = "no-stripe hidden" style = "display: block;">
      <td class = "align-right" colspan = "3">bla bla2</td>
    </tr>
    <tr class = "no-stripe hidden" style = "display: block;">
      <td class = "align-right" colspan = "3">bla bla3</td>
    </tr>
    <tr class = "no-stripe hidden" style = "display: block;">
      <td><strong>THIS needs to be first</strong> </td>
      <td class = "align-right" colspan = "2">xxxxxx
    </tr>
  </tbody>
</table>

JSFiddle

10.12.2018 15:16

Вы можете использовать гибкость и порядок, чтобы добиться желаемого.

tbody tr{

  display: block;
  border: 1px solid red;
}

<table class = "table table-condensed table-hover table-vertical-middle table-shop table-stack-phone">                                    

<tbody class = "tablebodyclass" style = "display: flex; flex-direction: column;">

<tr class = "no-stripe hidden" style = "order: 2;">
  <td class = "align-right" colspan = "3">bla bla1</td>
</tr>

<tr class = "no-stripe hidden" style = "order: 3;">
  <td class = "align-right" colspan = "3">bla bla2</td>
</tr>

<tr class = "no-stripe hidden" style = "order: 4;" >
  <td class = "align-right" colspan = "3">bla bla3</td>
</tr>
        
<tr class = "no-stripe hidden" style = "order: 1;">
  <td><strong>THIS needs to be first</strong> </td>
  <td class = "align-right" colspan = "2">xxxxxx
</tr>             
</tbody>    
</table>

Чтобы узнать больше о том, как работает Flex, вы можете прочитать эту [отличную статью]. (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

В общем, это не очень хорошая идея - использование flexbox приведет к потере таблицей характеристик макета по умолчанию. (Например, ячейки в разных строках больше не будут выровнены.)

— 10.12.2018 16:12

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

— 10.12.2018 16:43

10.12.2018 15:25