Css перенос строки таблицы

Перенести последнюю ячейку на новую строку

Есть таблица, в ней множество колонок. Как сделать, чтобы последняя колонка переносилась на новую строку? Пробовал сделать через флексы, но проблема в том, что для переноса нужен flex-wrap:wrap , а он переносит все ячейки, которые не помещаются на экране, то есть, этот вариант не подходит. Мне же нужно, чтоб переносилась исключительно последняя ячейка, а остальные могли выходить за пределы экрана сколько угодно. Возможно ли решить такое, если не через флексы, то другим способом? Условие — добавлять tr нельзя.

.row < display:flex; flex-wrap:wrap; >.row input < width:100px; >.row td:last-of-type < width:100%; >.row textarea
 

1 ответ 1

/* Все элементы выстраиваются в одну строку */ tr < white-space: nowrap; >/* Все элементы блочные, обтекаются другими элементами */ td < display: inline-block; >/* Последний элемент блочный */ td:last-child
 
Эта ячейка должна быть на новой строчке на всю ширину

Связанные

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.7.27.43548

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Читайте также:  Что такое побитовый сдвиг python

Источник

Css перенос строки таблицы

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

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

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

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

перенос сделать
ширину задайте 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 '

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

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

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

Источник

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

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

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

BenderIsGreat34

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

BenderIsGreat34

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

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

BenderIsGreat34

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

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

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

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

Как добавить нижнюю границу формы?

Источник

Перенос текста в таблице

Обычная таблица с указанной шириной. Слова автоматически переносятся на новую строку. А как сделать эту величину абсолютной? Просто, если в указанном примере написать длинный набор символов без пробела, то таблица растянется. Как сделать, чтобы даже безпробельный текст переносился, не растягивая по ширине таблицу?

2 ответа 2

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

Свойство word-wrap: break-word; по моему работает как не странно только в IE) Если и будут возникать длинные слова, то можно перенести вручную, но это наверняка единичные случаи.

Соглашусь со всем вышесказанным, только вот word-wrap работает во всех браузерах, хотя CSS-свойством его можно назвать с большой натяжкой.

@Deonis Попробуйте в chrom)) Я только что попробовал для проверки)) На сколько я помню это решение от Microsoft. Процитирую с Вашей ссылки: «Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. Данное свойство носит черновой характер и при валидации документа на CSS3 выдает ошибку.»

Источник

Оцените статью