Перенести последнюю ячейку на новую строку
Есть таблица, в ней множество колонок. Как сделать, чтобы последняя колонка переносилась на новую строку? Пробовал сделать через флексы, но проблема в том, что для переноса нужен 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.
Css перенос строки таблицы
Добрый день.Ситуация следующая,имеется таблица на сайте,в одном из столбцов указывается ссылка на сайт,и часто так что ссылка длинная и она так сказать выходит за границу ячейки и накладывается на следующую ячейку,т.е. не всегда осуществляется перенос.Вопрос в следующем,как можно задать принудительно длину строки в ячейке?
Так перенос сделать? или задать принудительно длину строки в ячейке? заголовок вопроса один, тело вопроса другой..
перенос сделать
ширину задайте width
Так перенос сделать? или задать принудительно длину строки в ячейке? заголовок вопроса один, тело вопроса другой..
перенос сделать
ширину задайте width
Перенос
не поможет т.к. таблица не статическая(выводит результаты того,что ввели пользователи), а width почему то не срабатывает(мож потому что очень много столбцов и таблица должна уместиться по ширине экрана)
№ п/п Дата сообщения Название ресурса Адрес ресурса Причина отнесения к негативному контенту Почта отправителя Количество голосов за негативность Ресурс находится в реестре Дата включения в реестр Внести в реестр Исключить из реестра Отправить в архив ДА НЕТ ' . $data['id'] . ' '; echo '' . $data['date_obr'] . ' '; echo '' . $data['resource'] . ' '; echo '' . $data['address'] . ' '; echo '' . $data['prichina'] . ' '; echo '' . $data['email'] . ' '; echo '' . $data['offres'] . ' '; echo '' . $data['onres'] . ' '; echo '' . $data['reestr'] . ' '; echo '' . $data['date_reestr'] . ' '; echo ''?> ">'; echo ' '?> ">'; echo ' '?> ">'; echo ''; > ?>
Способов — много, но нет ни одного 100% надёжного. Всё зависит какая кроссбраузерность требуется:
Я для принудительного переноса содержимого делал стиль ячеек:
но чаще всего, чтобы всё работало, приходится точно задавать ширину TD или вложенного DIV (не % а в px).
Как средствами 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, чтобы сделать перенос.
Войдите, чтобы написать ответ
Как добавить нижнюю границу формы?
Перенос текста в таблице
Обычная таблица с указанной шириной. Слова автоматически переносятся на новую строку. А как сделать эту величину абсолютной? Просто, если в указанном примере написать длинный набор символов без пробела, то таблица растянется. Как сделать, чтобы даже безпробельный текст переносился, не растягивая по ширине таблицу?
2 ответа 2
HTML перенос слов какими-либо тегами осуществить не удастся, а пользоваться вспомогательным кодом нет смысла, потому что результат будет отображен далеко не во всех браузерах, то есть не будет соблюдена его кросс-браузерность. Перенос слов можно производить вручную, но результат не понравится ни вам, ни вашим посетителям, потому как наличие большого количества черточек в тексте страницы не делают его привлекательным. Оставьте идею переноса слов – экономьте свое драгоценное время.
Свойство word-wrap: break-word; по моему работает как не странно только в IE) Если и будут возникать длинные слова, то можно перенести вручную, но это наверняка единичные случаи.
Соглашусь со всем вышесказанным, только вот word-wrap работает во всех браузерах, хотя CSS-свойством его можно назвать с большой натяжкой.
@Deonis Попробуйте в chrom)) Я только что попробовал для проверки)) На сколько я помню это решение от Microsoft. Процитирую с Вашей ссылки: «Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область. Данное свойство носит черновой характер и при валидации документа на CSS3 выдает ошибку.»