Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Ответ
 
Опции темы
Старый 20.04.2018, 09:22   #1
andriushka
Пользователь
 
Регистрация: 05.04.2017
Сообщений: 19
Репутация: 10
По умолчанию Принудительный перенос строки в ячейке таблицы

Добрый день.Ситуация следующая,имеется таблица на сайте,в одном из столбцов указывается ссылка на сайт,и часто так что ссылка длинная и она так сказать выходит за границу ячейки и накладывается на следующую ячейку,т.е. не всегда осуществляется перенос.Вопрос в следующем,как можно задать принудительно длину строки в ячейке?
andriushka вне форума   Ответить с цитированием
Старый 20.04.2018, 09:53   #2
Stanislav
Квадрокоптерист
Профессионал
 
Регистрация: 29.09.2007
Сообщений: 1,804
Репутация: 532
По умолчанию

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

перенос сделать <br> ширину задайте width
__________________
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума   Ответить с цитированием
Старый 20.04.2018, 11:52   #3
andriushka
Пользователь
 
Регистрация: 05.04.2017
Сообщений: 19
Репутация: 10
По умолчанию

Цитата:
Сообщение от Stanislav Посмотреть сообщение
Так перенос сделать? или задать принудительно длину строки в ячейке? заголовок вопроса один, тело вопроса другой..

перенос сделать <br> ширину задайте width
Перенос <br> не поможет т.к. таблица не статическая(выводит результаты того,что ввели пользователи), а width почему то не срабатывает(мож потому что очень много столбцов и таблица должна уместиться по ширине экрана)
andriushka вне форума   Ответить с цитированием
Старый 20.04.2018, 14:20   #4
Stanislav
Квадрокоптерист
Профессионал
 
Регистрация: 29.09.2007
Сообщений: 1,804
Репутация: 532
По умолчанию

Цитата:
а width почему то не срабатывает
код Ваш в студию
__________________
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума   Ответить с цитированием
Старый 20.04.2018, 20:55   #5
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,670
Репутация: 2055
По умолчанию

Засунь div внутрь ячейки, на него width будет работать.
* в этот див и вводи текст
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive на форуме   Ответить с цитированием
Старый 23.04.2018, 08:31   #6
andriushka
Пользователь
 
Регистрация: 05.04.2017
Сообщений: 19
Репутация: 10
По умолчанию

Цитата:
Сообщение от Stanislav Посмотреть сообщение
код Ваш в студию
Вот так выглядит код
Код:

<table style="margin:auto">
        <tr>
                <th rowspan="2">№ п/п</th>
                <th rowspan="2">Дата сообщения</th>
                <th rowspan="2">Название ресурса</th>
                <th rowspan="2">Адрес ресурса</th>
                <th rowspan="2">Причина отнесения к негативному контенту</th>
                <th rowspan="2">Почта отправителя</th>
                <th colspan="2">Количество голосов за негативность</th>
                <th rowspan="2">Ресурс находится в реестре</th>
                <th rowspan="2">Дата включения в реестр</th>
                <th rowspan="2">Внести в реестр</th>
                <th rowspan="2">Исключить из реестра</th>
                <th rowspan="2">Отправить в архив</th>
        </tr>
        <tr>
                <th>ДА</th>
                <th>НЕТ</th>
        </tr>
<?
include_once('../setting.php');
                unset($_POST['prichina']);
                unlink($_POST['prichina']);
        $on = 'select * from result where `arhive` is null order by `id` desc';
        $res = mysqli_query($con, $on);
        $data = array();
?>
        <form action="next_1.php" method="POST">
        <?
                while($data = mysqli_fetch_array($res))
                {
                        echo '<tr>';
                        echo '<td>' . $data['id'] . '</td>';
                        echo '<td>' . $data['date_obr'] . '</td>';
                        echo '<td>' . $data['resource'] . '</td>';
                        echo '<td>' . $data['address'] . '</td>';
                        echo '<td>' . $data['prichina'] . '</td>';
                        echo '<td>' . $data['email'] . '</td>';
                        echo '<td>' . $data['offres'] . '</td>';
                        echo '<td>' . $data['onres'] . '</td>';
                        echo '<td>' . $data['reestr'] . '</td>';
                        echo '<td>' . $data['date_reestr'] . '</td>';
                        echo '<td>'?> <input type="checkbox" id="check" name="q[]" value="<?= $data['id'] ?>"><? '</td>';
                        echo '<td>'?> <input type="checkbox" id="check" name="e[]" value="<?= $data['id'] ?>"><? '</td>';
                        echo '<td>'?> <input type="checkbox" id="check" name="w[]" value="<?= $data['id'] ?>"><? '</td>';

                        echo '</tr>';
                }
        ?>
</table>

В стилях следующее
Код:

table {
width:100%;
border-spacing: 0 0px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
border-collapse: collapse;
overflow: auto;
table-layout: fixed;
}
th {
background: #8CC6EB;
color: #ffffff;
border-right: 2px solid;
border-top: 2px solid;
border-left: 2px solid;
font-size: 0.9em;
text-align:left;
}
th:first-child {
text-align: left;
}
td {
vertical-align: middle;
padding: 10px;
font-size: 14px;
text-align: center;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
border-right: 2px solid #56433D;
}

andriushka вне форума   Ответить с цитированием
Старый 24.04.2018, 22:55   #7
Ottava
Форумчанин
 
Регистрация: 05.09.2017
Сообщений: 88
Репутация: 26
По умолчанию

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

- max-width (https://habr.com/post/217911/)
- проблемы break-word в IE8 (http://stackoverflow.com/questions/3...working-in-ie8)
- http://jsfiddle.net/CyberAP/NUHTk/ живая демонстрашка break-word в песочнице, где можно править код и смотреть что получится. Правда, на примере <div>, а не <td>. Часто приходится помещать div внутрь td чтобы стили начали работать корректно.
- статья + демка CSS стилей переноса слов: overflow-wrap, break-word, word-wrap, line-break http://shpargalkablog.ru/2013/02/word-wrap.html
- для таблиц можно применять стиль style="table-layout:fixed;", но это требует явного задания ширины таблицы и/или ячеек.

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

td { word-wrap:break-word; }

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

Последний раз редактировалось Ottava; 24.04.2018 в 23:08.
Ottava вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Некорректный перенос текста в объединенной ячейке таблицы word ольгаг Общие вопросы .NET 0 12.10.2017 21:18
[Javascript] Выделение строки и столбца относящихся к ячейке таблицы irt JavaScript, Ajax 5 22.12.2015 23:59
Принудительный перенос текста в строке по условию - Delphi S_007 Помощь студентам 8 07.06.2015 21:11
Перенос текста в одной ячейке, в отдельные строки...трансформировать не катит IAM_ Microsoft Office Excel 6 23.10.2011 18:17
Перенос длинного текста в ячейке таблицы den_1973 HTML и CSS 4 12.10.2010 15:29


17:27.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru