Перенос таблицы автоматом. - HTML и CSS

Stilet · 18.08.2015, 16:50

Всем привет. У меня иногда на сайт выдается таблица в которой бывает очень много колонок. иногда около 100.
Так надо, ничего увы не сократить. И таблица эта уходит естесственно за правую границу экрана. Прокрутка конечно хорошо, но пользователи задали каверзный вопрос: А можно ли сделать так, чтоб таблица сама подстраивалась под размер окна, перенося ячейки на следующую так сказать строку автоматом?

Вот собственно если кто в курсе можно ли так поступать с таблицами - подскажите.

На данный момент у меня в CSS для таблицы прописано такое:

Код:

table{ 
 border-collapse: collapse;
 width: 100%;
 color:#000000;
}

Naive · 18.08.2015, 17:01

Не получится...
Либо вручную пилить скриптом, либо переверстывать на не-таблицу.
Если таблица с данными, то я бы выбрал первый вариант.

Stilet · 18.08.2015, 17:24

Хм... Жаль. Ладно. Подумаю что в моем случае будет проще... Наверное JSONом отправлять инфу клиенту. А тот на странице уж пусть JSями формирует таблицу. Скажем по выбору клиента из списка сколько столбцов на строку совместить.
Хотел конечно малой кровью, да видно не "субдя"

Вадим Мошев · 18.08.2015, 17:46

Минутку.
А что, если таблицу засунуть в div, для которого поставить overflow-x: scroll, и пусть эта таблица содержит хоть 100000500000 колонок?

Stilet · 18.08.2015, 19:31

Мне полосы прокрутки ни к чему. Они есть у браузера.

Vapaamies · 18.08.2015, 20:07

Цитата:

Сообщение от Вадим Мошев

А что, если таблицу засунуть в div, для которого поставить overflow-x: scroll, и пусть эта таблица содержит хоть 100000500000 колонок?

Это надо не таблицу, а данные верстать div-ами внутри такого контейнера. Получится типа как в Твиттере, больше похоже на режим плиток в виндовом Проводнике. Каждая плитка -- ячейка.

Stilet · 18.08.2015, 21:33

Цитата:

данные верстать div-ами

Мне это не удобно. Но идею я понял.

Smitt&Wesson · 19.08.2015, 02:52

Цитата:

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

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

Вот собственно если кто в курсе можно ли так поступать с таблицами - подскажите.

Обычно таблица, это структурированный тип данных. Строки обычно содержат наименование параметра, а столбцы, его значения.
1. Просто переносить значения со строки на строку можно только в том случае, если в каждом столбце, параметры однотипные. Они у тебя однотипные?
2. Если сайт твой, откуда берётся "левая" таблица? Если не твой, то тут - только парсить. Если она поступает к тебе из другого источника и ты её размещаешь на сайте, то причём здесь CSS? Можно написать PHP срипт и засунуть её туда. Пусть он её приводит в порядок.Ещё можно написать JavaScript, который будет определять настройки экрана конкретного пользователя и по ним, расчитывать количество ячеек таблицы, в зависимости от их содержимого.
3. Каким образом эта таблица отправляется пользователям?

Вопросы не праздные, ответ зависит от того, как на них ответить.

SQLPowerUser · 19.08.2015, 16:05

Как вариант...

Код HTML:

<!DOCTYPE HTML>
<html>
<head>
  <title>Перенос столбцов в таблице</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <style>
body {width:100%;}
table {border-collapse:collapse;}
#bigTable td, .divWrap td {
  border:1px solid #ccc;
  padding:3px 8px;
  white-space:nowrap;
  font:15px 'Verdana';
}
.divWrap {
  margin-top:10px;
  float:left;
}
</style>

</head>
<body>
<button onclick="wrapColumns(document.getElementById('bigTable'));">Выполнить перенос столбцов</button> <br><br>
<table id="bigTable">
  <tr>
    <td>Малкольм Мерлин, ты подвёл этот город.</td> <td>И как это я умудрился?</td> <td>Предприятие. Я его остановлю. Где устройство?</td>
    <td>В безопасности. Тех, кто уничтожает город изнутри, надо стереть с лица земли.</td>
    <td>Отлично. Начнем с тебя!</td>
  </tr>
  <tr> <td>1_1</td> <td>1_2</td> <td>1_3</td> <td>1_4</td> <td>1_5</td> </tr>
  <tr> <td>2_1</td> <td>2_2</td> <td>2_3</td> <td>2_4</td> <td>2_5</td> </tr>
  <tr> <td>3_1</td> <td>3_2</td> <td>3_3</td> <td>3_4</td> <td>3_5</td> </tr>
  <tr> <td>4_1</td> <td>4_2</td> <td>4_3</td> <td>4_4</td> <td>4_5</td> </tr>
  <tr> <td>5_1</td> <td>5_2</td> <td>5_3</td> <td>5_4</td> <td>5_5</td> </tr>
</table>

<script>
function CEL(s) {return document.createElement(s);}
function ACH(p,c) {p.appendChild(c);}

function wrapColumns(tbl) {
  var rowsCnt=tbl.rows.length, colsCnt=tbl.rows[0].cells.length, i=0, j=0, newCell;
  for (j=0; j<colsCnt; j++) {
    var div = CEL('div'), t = CEL('table');
    div.style.width = tbl.rows[0].cells[j].offsetWidth + 'px';
    div.className = 'divWrap';
    for (i=0; i<rowsCnt; i++) {
      newCell = tbl.rows[i].cells[j].cloneNode(true);
      ACH(t.insertRow(-1), newCell);
    }
    ACH(div,t);
    ACH(document.body,div);
  }
}
</script>
</body>
</html>

Stilet · 19.08.2015, 19:26

Да, ну собственно Naive такого плана выход и предлагал )
А я всетки думаю сделать попроще - JSON на клиента, а там уже формировать по выбору сколько колонок пользователь на страницу закажет.

18.08.2015, 16:50	#1
Stilet Белик Виталий :) Старожил Регистрация: 23.07.2007 Сообщений: 57,097	Перенос таблицы автоматом. Всем привет. У меня иногда на сайт выдается таблица в которой бывает очень много колонок. иногда около 100. Так надо, ничего увы не сократить. И таблица эта уходит естесственно за правую границу экрана. Прокрутка конечно хорошо, но пользователи задали каверзный вопрос: А можно ли сделать так, чтоб таблица сама подстраивалась под размер окна, перенося ячейки на следующую так сказать строку автоматом? Вот собственно если кто в курсе можно ли так поступать с таблицами - подскажите. На данный момент у меня в CSS для таблицы прописано такое: Код: `table{ border-collapse: collapse; width: 100%; color:#000000; }` I'm learning to live...

18.08.2015, 17:01	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	Не получится... Либо вручную пилить скриптом, либо переверстывать на не-таблицу. Если таблица с данными, то я бы выбрал первый вариант. Alar, верни репу!

18.08.2015, 17:24	#3
Stilet Белик Виталий :) Старожил Регистрация: 23.07.2007 Сообщений: 57,097	Хм... Жаль. Ладно. Подумаю что в моем случае будет проще... Наверное JSONом отправлять инфу клиенту. А тот на странице уж пусть JSями формирует таблицу. Скажем по выбору клиента из списка сколько столбцов на строку совместить. Хотел конечно малой кровью, да видно не "субдя" I'm learning to live...

18.08.2015, 17:46	#4
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	Минутку. А что, если таблицу засунуть в div, для которого поставить overflow-x: scroll, и пусть эта таблица содержит хоть 100000500000 колонок? Последний раз редактировалось Вадим Мошев; 18.08.2015 в 20:48. Причина: описку исправил

18.08.2015, 19:31	#5
Stilet Белик Виталий :) Старожил Регистрация: 23.07.2007 Сообщений: 57,097	Мне полосы прокрутки ни к чему. Они есть у браузера. I'm learning to live...

19.08.2015, 19:26	#10
Stilet Белик Виталий :) Старожил Регистрация: 23.07.2007 Сообщений: 57,097	Да, ну собственно Naive такого плана выход и предлагал ) А я всетки думаю сделать попроще - JSON на клиента, а там уже формировать по выбору сколько колонок пользователь на страницу закажет. I'm learning to live...

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
перенос из одной таблицы БД в другую	WishHunter	Помощь студентам	9	21.02.2013 08:15
массивы строк. перенос в таблицы	deathz0r	Помощь студентам	1	23.11.2011 21:48
Перенос данных из таблицы в таблицу	Kisma	БД в Delphi	7	22.10.2010 12:09
работа с массивом. перенос с таблицы	sn00p	Microsoft Office Excel	7	30.09.2010 13:13
авт. перенос данных из нескольких столбцов одной таблицы в один столбец другой таблицы	A_ALL	Microsoft Office Access	7	24.08.2009 21:13