Перенос ячеек таблицы css

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

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

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

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

    Перенос столбцов в таблице "text/html; charset=utf-8"> "no-cache, no-store, must-revalidate"> "no-cache"> "0"> "IE=edge"> body table #bigTable td, .divWrap td < border:1px solid #ccc; padding:3px 8px; white-space:nowrap; font:15px 'Verdana'; >.divWrap "wrapColumns(document.getElementById('bigTable'));">Выполнить перенос столбцов  "bigTable">  Малкольм Мерлин, ты подвёл этот город. И как это я умудрился? Предприятие. Я его остановлю. Где устройство? В безопасности. Тех, кто уничтожает город изнутри, надо стереть с лица земли. Отлично. Начнем с тебя!   1_1 1_2 1_3 1_4 1_5   2_1 2_2 2_3 2_4 2_5   3_1 3_2 3_3 3_4 3_5   4_1 4_2 4_3 4_4 4_5   5_1 5_2 5_3 5_4 5_5   function CEL(s) function ACH(p,c) function wrapColumns(tbl) < var rowsCnt=tbl.rows.length, colsCnt=tbl.rows[0].cells.length, i=0, j=0, newCell; for (j=0; j ACH(div,t); ACH(document.body,div); > >

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

Читайте также: Java package for math

Источник

Как средствами CSS сделать так, чтобы колонки в таблице переносились на другую строку?

Если смотреть через телефон, то она уходит вправо и нужзно ее скролить. Как только через CSS сделать так, чтоб ячейки переносились на другую сторону, чтобы небыло горизонтальной прокрутки?

Простой 6 комментариев

откажитесь от допотопной системы сеток при помощи table и будьте стильными, модными молодёжными, юзайте гриды, на крайняк флексы

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

Иван, рисовать флексами таблицы ты извращенец и не любишь семантику 🙁
таблица должна быть таблицой.
адаптировать ее сложнее но https://css-tricks.com/accessible-simple-responsiv.

Froggyweb, обидеть художника может каждый, а ты попробуй отс.
А вообще, таблица таблицей, но в 2к20 использовать такие теги — время на ветер, всё равно придётся переделывать, в худшем случае придётся по пикселям рассчитывать, чтобы было адекватно. Но если у тебя приличная таблица, ты хоть что сделай, хоть расшибись, она не будет адаптивной и красивой, тут и выходят гриды. Хотя, если таблица состоит из одного заголовка и одной ячейки, то конечно можно и заюзать))

@media screen and (max-width: 568px) < table td < display:inline-block; >>

Указываете, в стилях для экранов под телефоны другой стиль. Например, можно поменять у них display, чтобы сделать перенос.

Войдите, чтобы написать ответ

Можно ли округлить число в CSS или какой костыль можно придумать?

Источник

Как средствами CSS сделать так, чтобы колонки в таблице переносились на другую строку?

Простой 6 комментариев

@media screen and (max-width: 568px) < table td < display:inline-block; >>

Войдите, чтобы написать ответ

Можно ли округлить число в CSS или какой костыль можно придумать?

Источник

Перенос ячеек таблицы css

Добрый день.Ситуация следующая,имеется таблица на сайте,в одном из столбцов указывается ссылка на сайт,и часто так что ссылка длинная и она так сказать выходит за границу ячейки и накладывается на следующую ячейку,т.е. не всегда осуществляется перенос.Вопрос в следующем,как можно задать принудительно длину строки в ячейке?

Так перенос сделать? или задать принудительно длину строки в ячейке? заголовок вопроса один, тело вопроса другой..

перенос сделать
ширину задайте width

Перенос
не поможет т.к. таблица не статическая(выводит результаты того,что ввели пользователи), а width почему то не срабатывает(мож потому что очень много столбцов и таблица должна уместиться по ширине экрана)

   '; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; echo ''; > ?> № п/п  Дата сообщения  Название ресурса  Адрес ресурса  Причина отнесения к негативному контенту  Почта отправителя  Количество голосов за негативность  Ресурс находится в реестре  Дата включения в реестр  Внести в реестр  Исключить из реестра  Отправить в архив  
 ДА  НЕТ  
' . $data['id'] . ' ' . $data['date_obr'] . ' ' . $data['resource'] . ' ' . $data['address'] . ' ' . $data['prichina'] . ' ' . $data['email'] . ' ' . $data['offres'] . ' ' . $data['onres'] . ' ' . $data['reestr'] . ' ' . $data['date_reestr'] . ' '?> ">'; echo ' '?> ">'; echo ' '?> ">'; echo '

№ п/п	Дата сообщения	Название ресурса	Адрес ресурса	Причина отнесения к негативному контенту	Почта отправителя	Количество голосов за негативность	Ресурс находится в реестре	Дата включения в реестр	Внести в реестр	Исключить из реестра	Отправить в архив
ДА	НЕТ
' . $data['id'] . '	' . $data['date_obr'] . '	' . $data['resource'] . '	' . $data['address'] . '	' . $data['prichina'] . '	' . $data['email'] . '	' . $data['offres'] . '	' . $data['onres'] . '	' . $data['reestr'] . '	' . $data['date_reestr'] . '	'?> ">'; echo '	'?> ">'; echo '	'?> ">'; echo '

Способов — много, но нет ни одного 100% надёжного. Всё зависит какая кроссбраузерность требуется:

Я для принудительного переноса содержимого делал стиль ячеек:

но чаще всего, чтобы всё работало, приходится точно задавать ширину TD или вложенного DIV (не % а в px).

Источник