Перенос ячеек в пределах строки таблицы

@Secret73 · Регистрация: 14.01.2016

Студворк — интернет-сервис помощи студентам

Есть элементарный html. Вопрос следующий, каким css свойством сделать, что бы ячека с Текст2, съезжала под ячейку Текст1.

HTML5
1
2
3
4
5
6
<table>
    <tr>
        <td>Текст1<td>
        <td>Текст2<td>
    </tr>
</table>

@mrtoxas · 19.07.2016, 13:49

Если высота\ширина ячеек известна и она фиксированная, то можно поменять через позиционирование.

@Fedor92 · 19.07.2016, 13:55

Сообщение от mrtoxas

то можно поменять

Что поменять?

Сообщение от Secret73

что бы ячейка с Текст2, съезжала под ячейку Текст1.

Миссия не выполнима, ИМХО... Если это не таблица на дивах...

@Secret73 · 19.07.2016, 14:02 **[ТС]**

Впринципе этот вариант работает. Что скажете, такое может жить?

HTML5
1
2
3
4
5
6
<table>
    <tr>
        <td class="yacheika1">Текст1<td>
        <td class="yacheika2">Текст2<td>
    </tr>
</table>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.yacheika1 {
    width: 100px;
    height: 100px;
    position: absolute;
    border: 1px solid red;
}
.yacheika2 {
    width: 100px;
    height: 100px;
    position: absolute;
    border: 1px solid red;
    top: 130px;
}

@Fedor92 · 19.07.2016, 14:10

Сообщение от Secret73

Что скажете, такое может жить?

Перфекционист говорит нет...

@mrtoxas · 19.07.2016, 14:11

Может вам просто так надо?

HTML5
1
2
3
4
5
6
7
8
<table>
  <tr>
    <td class="yacheika1">Текст1<td>
  </tr>
  <tr>
    <td class="yacheika2">Текст2<td>
  </tr>
</table>

@Secret73 · 19.07.2016, 14:13 **[ТС]**

Fedor92, Значит нужно переверстать на div?

Добавлено через 1 минуту
mrtoxas, Нет, так не подходит. Потому что вопрос стоит в адаптивности. Что если основная версия то в одну строчку, если мобильный, то друг под дружкой.

@mrtoxas · 19.07.2016, 14:15

Сообщение от Fedor92

Перфекционист говорит нет...

А так?

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
table{
  width:20px;
  height:10px;
  border-collapse:collapse;
  position: relative;    
}
td{  
  position: absolute;  
}
.one{
  left:10px;
  top:20px;
}
.two{
  top:20px;
  left:0;
}
.three{
  top:0;
  left:10px;
}
.four{
  top:0;
  left:0;
}

HTML5
1
2
3
4
5
6
7
8
9
10
<table>
  <tr>
    <td class="one">1</td>
    <td class="two">2</td>
  </tr>
  <tr>
    <td class="three">3</td>
    <td class="four">4</td>
  </tr>
</table>

http://codepen.io/anon/pen/QEQBEz

Secret73, А таблицей принципиально? Такая адаптивность дивами делается легко

@Secret73 · 19.07.2016, 14:18 **[ТС]**

mrtoxas, Нет не принципиально, значит попробую на div переделать.

@Fedor92 · 19.07.2016, 14:23

Сообщение от Secret73

Fedor92, Значит нужно переверстать на div?

Вкушайте, надеюсь поймёте в чём смысл:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Table</title>
      <style>
      html, body{width:100%; height:100%; margin:0 auto}
        div{border:1px solid red}
        .table{display:table; width:100%}
        .table-row{display:table-row}
        .table-cell{display:table-cell}
        @media screen and (max-width:980px){
            .table-cell{display:block}
        }
      </style>
    </head>
    <body>
        <div class="table">
            <div class="table-row">
                <div class="table-cell">Текст1</div>
                <div class="table-cell">Текст2</div>
            </div>
        </div>
    </body> 
</html>

@Secret73 · 19.07.2016, 14:27 **[ТС]**

Fedor92, Смысл понятен

@Shakalaka · 19.07.2016, 14:27

Fedor92, а зачем что-то переверстывать, если можно просто задать в css

CSS
1
2
3
4
5
6
7
8
td{
  display:block;
}
@media (min-width:600px){
  td{
    display:table-cell;
  }
}

HTML5
1
2
3
4
5
6
<table>
    <tr>
        <td>Текст1<td>
        <td>Текст2<td>
    </tr>
</table>

@Fedor92 · 19.07.2016, 14:33

Сообщение от Shakalaka

Fedor92, а зачем что-то переверстывать, если можно просто задать в css

Семантика... Отталкиваюсь только от неё...

@Secret73 · 19.07.2016, 14:38 **[ТС]**

Shakalaka, что то не работает Ваш вариант

@Shakalaka · 19.07.2016, 14:50

Secret73, все там работает. Ячейки станут друг под друга. Другое дело, какое поведение вы хотите от самой таблицы. Если поведение дива, то нужно обнулить табличные стили

HTML5
1
2
3
4
5
6
7
ресайзите экран 
<table>
    <tr>
    <td>Текст1</td>
    <td>Текст2</td>
    </tr>
</table>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
table, tr, td, tbody{
  display:block;
  width:100%;
  display:block;
}
td{
  
  border:1px solid #000;
  
}
@media (min-width:600px){
  table{
    display:table;
    width:auto;
  }
  tbody{
    display:table-row-group;
    width:auto;
  }
  tr{
    display:table-row;
    width:auto;
  }
  td{
    display:table-cell;
    width:auto;
  }
}

https://jsfiddle.net/shakalaka/x0fobkqk/

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	19.07.2016, 13:49
	Если высота\ширина ячеек известна и она фиксированная, то можно поменять через позиционирование. 1

@Secret73 12 / 12 / 7 Регистрация: 14.01.2016 Сообщений: 264
	19.07.2016, 14:13 [ТС]
	Fedor92, Значит нужно переверстать на div? Добавлено через 1 минуту mrtoxas, Нет, так не подходит. Потому что вопрос стоит в адаптивности. Что если основная версия то в одну строчку, если мобильный, то друг под дружкой. 0

@Secret73 12 / 12 / 7 Регистрация: 14.01.2016 Сообщений: 264
	19.07.2016, 14:18 [ТС]
	mrtoxas, Нет не принципиально, значит попробую на div переделать. 0

@Secret73 12 / 12 / 7 Регистрация: 14.01.2016 Сообщений: 264
	19.07.2016, 14:27 [ТС]
	Fedor92, Смысл понятен 0

@Secret73 12 / 12 / 7 Регистрация: 14.01.2016 Сообщений: 264
	19.07.2016, 14:38 [ТС]
	Shakalaka, что то не работает Ваш вариант 0

Перенос ячеек в пределах строки таблицы

Решение