Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/6: Рейтинг темы: голосов - 6, средняя оценка - 4.67
0 / 0 / 0
Регистрация: 08.03.2015
Сообщений: 2

Форматирование таблицы

08.03.2015, 14:15. Показов 1298. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Здравствуйте.
Есть список задач с привязкой к дате в базе mysql, типа:
1 Проект стадия П 2015-03-10
2 Исходные данные 2015-03-08
3 Разработка ГП 2015-03-03
4 Разработка КР 2015-03-05
5 Отчет об экологических изысканиях 2015-03-10

Хочу организовать вывод этих задач в виде календаря на месяц, как на картинке, на всю ширину страницы.
Получается следующий код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table width=100% height=100% border=0 cellspacing=1 cellpadding=1>
  <tr>
    <td colspan=7 align=center>Март 2015</td>
  </tr>
  <tr>
    <td width=18%>Пн</td><td width=18%>Вт</td><td width=18%>Ср</td><td width=18%>Чт</td><td width=18%>Пт</td><td width=5%>Сб</td><td width=5%>Вс</td>
  </tr>
  <tr>
    <td align=left valign=top  ID=Cell-5 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell-4 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell-3 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell-2 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell-1 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell0 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell1 bgcolor=White>
          <table width=100%><tr><td align=right>1</td></tr></table>
          <div style="overflow: hidden; width:90%; height:100%; border: 1px solid black">
            <table><tr><td align=left><nobr>1 Получение кад.паспорта<nobr></td></tr><tr><td align=left><nobr>2 Межевание<nobr></td></tr></table>
          </div>
        </td>
  </tr>
...
</table>
На картинке видно, что ячейки меняют размер в зависимости от их содержимого.
Как сделать, чтобы размеры ячеек оставались фиксированные, а содержимое, выходящее за границы обрезалось, было невидимым, при этом переносов быть не должно, т.е. каждая задача в 1 строчку.
Таблица в целом не должна выходить за размеры окна, как на картинке 2.
(этого удалось добиться указав в div overflow: hidden; width:140; height:70. но подбирать под каждый экран - это неправильно)

Подскажите, пожалуйста, как правильно это реализовать?
Миниатюры
Форматирование таблицы   Форматирование таблицы  
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
08.03.2015, 14:15
Ответы с готовыми решениями:

Таблицы - жесткое форматирование
Помогите плиzzzzz!!! Нужно задать жесткое форматирование на таблицу - те при изменении окна таблица не должна изменять размеры....

Форматирование таблицы. Как отдельно каждому столбцу задать свою индивидуальную ширину?
Добрый день. Подскажите пжл, вот есть таблица из 5 столбцов, как отдельно каждому столбцу задать свою индивидуальную ширину? Просто у...

Форматирование таблицы
Здравствуйте. Подскажите, пожалуйста, как выровнить таблицу. String.format(&quot;%-20s %-20s %-20s&quot;, userDTO.getUserId(),...

5
 Аватар для monochromer
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
08.03.2015, 16:19
Хорошим способом было бы использование свойств
CSS
1
2
3
4
5
{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
Запрет переноса строк с обрезкой с помощью многоточия не вместившихся слов.
1
08.03.2015, 16:31

Не по теме:

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

0
0 / 0 / 0
Регистрация: 08.03.2015
Сообщений: 2
08.03.2015, 18:13  [ТС]
Получилось следующее:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.calend {
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    text-overflow: ellipsis; /* Добавляем многоточие */
    color: #000000; MARGIN-TOP: 1px; FONT-WEIGHT: bold; FONT-SIZE: 10pt; MARGIN-BOTTOM: 1px; FONT-FAMILY: Tahoma,Arial,sans-serif; TEXT-DECORATION: none;
   }
 
<table width=100% height=100% border=0 cellspacing=1 cellpadding=1>
  <tr>
    <td colspan=7 align=center>Март 2015</td>
  </tr>
  <tr>
    <td width=18%>Пн</td><td width=18%>Вт</td><td width=18%>Ср</td><td width=18%>Чт</td><td width=18%>Пт</td><td width=5%>Сб</td><td width=5%>Вс</td>
  </tr>
  <tr>
    <td align=left valign=top  ID=Cell-5 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell-4 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell-3 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell-2 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell-1 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell0 bgcolor=White>&nbsp;</td>
    <td align=left valign=top  ID=Cell1 bgcolor=White>
          <div align=right>1</div>
          <a target=_top class=calend href="proj.php?id=22" title="БЭСТ КЭР: Проверка выполненности в группе">1.Проверка выполненности в группе</a><br>
          <a target=_top class=calend href="proj.php?id=22" title="БЭСТ КЭР: Проверка в группе">2.Проверка в группе</a><br>
    </td>
  </tr>
...
</table>
Запрет переноса строк работает, а text-overflow: ellipsis многоточие не показывает, т.е. получается как на картинке 1. Проверял, это свойство в Chrome.
0
 Аватар для monochromer
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
09.03.2015, 09:37
SBM, тут для таблицы нужно добавить еще
CSS
1
2
3
4
table {
    width: 100%;
    table-layout: fixed;
}
http://jsbin.com/zavoselevu/1/edit?html,css,output

Fedor92, думаю, что такое можно реализовать только на js с учетом, что контейнер текста не будет резиновым.
1
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
09.03.2015, 10:33
Цитата Сообщение от monochromer Посмотреть сообщение
Fedor92, думаю, что такое можно реализовать только на js
Спасибо за ответ, жалко конечно, что без js не получится

Цитата Сообщение от monochromer Посмотреть сообщение
что контейнер текста не будет резиновым
У меня немножко другая задача, дело не в резине - всё дело в контенте... Ладненько как-нибудь адаптирую...
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
09.03.2015, 10:33
Помогаю со студенческими работами здесь

Форматирование таблицы
Существует ли возможность растягивать текст в ячейке по ширине? И как вообще в Word 2010 зайти в свойства шрифта или абзаца текста,...

Форматирование и сортировка таблицы
всем привет! есть задача написать макрос по форматированию и сортировке таблицы изначальная таблица - это выгрузка счета из 1С...

Форматирование таблицы [calc]
Имеется код При установке значения border ячйки не принимают границ Set xlglob = CreateObject (...

Форматирование таблицы FlexGrid
Добрый день! Подскажите как сделать форматирование таблицы FlexGrid чтобы привести ее примерно в такой вид как на картинке.

Форматирование таблицы из цикла
Всем привет! Подскажите, такую вещь. Если без ft делать вывод из цикла, то вся инфа падает в общую табличку. Т.е: $a =...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru