Как растянуть таблицу в html
Чтобы растянуть таблицу в HTML, можно задать ей ширину в процентах или пикселях.
Например, чтобы растянуть таблицу на всю ширину страницы, можно задать ей ширину 100%:
style="width:100%"> Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 1 Ячейка 2 Ячейка 3 В этом примере таблица будет занимать всю ширину родительского элемента, в данном случае — всю ширину страницы.
Также можно задать ширину таблицы в пикселях:
style="width:800px"> Заголовок 1 Заголовок 2 Заголовок 3 Ячейка 1 Ячейка 2 Ячейка 3 В этом примере таблица будет иметь фиксированную ширину 800 пикселей.
Большие таблицы в HTML
Как сделать большую таблицу в HTML. При количестве элементов на странице (около 500 строк) браузер загибается. Есть ли какой нить стандартный способ или JAVA апплет или Activ X свой юзать придеться?
Плиз, гуру веб мастеринга, подскажите..
Главная проблема таблиц в том, что они не могут загружаться
в браузер пользователя последовательно, строка за строкой.
Это вполне закономерно: чтобы нарисовать, например, первую
строку таблицы, браузер должен сначала загрузить все
последующие строки и ячейки, так как от их размеров зависит
вид первой и всех остальных ячеек. Как следствие — пока вся
таблица не загрузится в память компьютера пользователя, она
не показывается на экране. В результате страница визуально
(то есть по ощущениям пользователя) грузится очень долго
(5) Сделай ширину столбцов FIXED. Тогда она будет показываться сразу еще до загрузки всей страницы. Посмотри, как сделано на мисте
(9) Ок, Спасибо, попробую. Тут просто кое кто кинуол пальцы что у него все есть для написания 1с подобной системы на html + php + bd. Вот только с выводом таблиц больших проблемы. Я знаю про это, вот думал мне аппляй написать или может другой способ есть.
Кстати доработанный движок и вся моя работа на винте сгорела :(. Абидна..
вообще большие таблицы в вебе — плохой тон.
думаю нужно, либо дать скачать табличный файл, либо организовать поиск
(15) Динамический поиск в справочнике 1с представляешь? Вот сделай мне его в HTML.. Через страницы не канает..
Здесь решение сохраняет таблицу в HTML с нулевым форматированием и CSS.
Книга знаний: Сохранение данных MXL->XLS через HTML
(17,18,19) Болт на ваши активиксы, джаву и прочий изврат.
Хотите написать грамотно, юзайте XHTML Strict и AJAX. При желании и наличии мозгов можно решить почти любую проблему.
(5,8) Для справки: отображение таблицы зависит не от ширины столбцов, а от браузера. Opera и FF умеют показывать страницу в процессе рендеринга, а ИЕ — не умеет. Отсюда и видимость проблемы.
Можно использовать программу «1С:Предприятие — Работа с файлами» для просмотра MXL и прочих файлов, которая распространяется фирмой 1С бесплатно, и подходит для файлов 7.7/8.0.
http://v8.1c.ru/metod/fileworkshopdownload.htm
мне MXL не надо отображать.. Эт я в курсе как готовить. Мне (16)
Получил пищу для размышлений. Пошел курить мануалы и многа думать. Всем откликнувшимся большое спасибо..
(27)imho, тут больше, наверное,что : любая технология хороша к месту,а не из-за того,что она модная и популярная или её можно использовать принципиально .
Выводить информацию в 100(тем более 1000) строк в web криво по определению.И с точки зрения юзабилити тоже.
Это, скорее всего, просчет идеологический.Какая польза пользователю жечь трафик($ и время),чтобы созерцать 95% лишней инфы?
В Excel это оправдано тем, что можно быстро группировать и считать.К автору: чем оправдано в данном случае?
Как вместить большие таблицы на страницы сайта
Обычно на мобильных скролбар скрыт и не совсем понятно что есть возможность прокрутить таблицу. Более лучший вариант можно сделать добавлением теней по бокам таблицы.
.big-table < overflow: auto; position: relative; >.big-table table < display: inline-block; vertical-align: top; max-width: 100%; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; >.scroll-right:after < content: ''; display: block; width: 15px; position: absolute; top: 0; right: 0; bottom: 0; z-index: 500; background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center; background-repeat: no-repeat; background-attachment: scroll; background-size: 15px 100%; background-position: 100% 0%; >.scroll-left:before
JQuery:
$(function() < $('table').wrap('box_width) < $(this).addClass('scroll-right'); >else < $(this).removeClass('scroll-right'); >>); > resize_table_box(); $( window ).on('resize', function() < resize_table_box(); >); $('.big-table table').on('scroll', function() < var parent = $(this).parent(); if ($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) < if (parent.hasClass('scroll-right') )< parent.removeClass('scroll-right'); >> else if ($(this).scrollLeft() === 0) < if (parent.hasClass('scroll-left'))< parent.removeClass('scroll-left'); >> else < if(!parent.hasClass('scroll-right'))< parent.addClass('scroll-right'); >if(!parent.hasClass('scroll-left')) < parent.addClass('scroll-left'); >> >); >);Результат:
Комментарии 2
Привет мастер! Совершенно случайно попал на эту страничку и обнаружил на ней скрипт моей мечты – очень давно хотел, чтобы таблица имела что-то позволяющее понять, что есть горизонтальная прокрутка таблицы. Попробовал применить ваш замечательный Код, однако столкнулся с проблемой. Если вся конструкция расположена непосредственно на странице со статьёй, то всё работает, но стоит вынести JS во внешний файл (на моём сайте много страниц с большими таблицами), перестаёт работать эффект тени. Как-то можно побороть эту неприятность?
Ничего не понимаю, почему это не работает здесь? https://re-news.com.ua/news/klassifikaczii-novostroek-kakie-byvayut-i-chem-otlichayutsya-2/
Авторизуйтесь, чтобы добавить комментарий.
Другие публикации
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
Как задать максимальную ширину таблицы
Вам нужно вывести таблицу конкретно заданной ширины? Ваша таблица очень большая и при отображении ее «разносит» до неприличных размеров? Да еще при этом свойство max-width не работает? Тогда вы попали по адресу. В этой статье мы рассмотрим способы решения данной проблемы.
Давайте рассмотрим проблему в корне.
Согласно html спецификациям, результат использования свойств max(min)-width(height) для таблиц не определён.
Теперь вспомним немного теории: у нас есть возможность задавать произвольные размеры для блочного элемента.
Следовательно, «внедрив» нашу таблицу в блочную обертку, мы сможем оперировать ее шириной и высотой (а точнее манипулировать посредством изменения параметров родительского блока). Очевидно, что лучшим кандидатом среди блочных структур на роль родителя будет div.
Рассмотрим сказанное на примере.
DOCTYPE html> html> head> title>Задаем максимальную ширину таблицеtitle> meta charset="UTF-8"> link rel="stylesheet" media="all" type="text/css" href="./style2.css" /> meta name="viewport" content="width=device-width, initial-scale=1.0"> head> body> div> table border="1"> tr> td>Задаемtd>td>фиксированнуюtd>td>ширинуtd>td>таблицыtd> tr> table> div> body> html> table width: 100%; /* Задаем ширину таблицы */ > div max-width: 900px; /* Задаем ширину родительского блока */> 
Как видим, теперь, методом «родительского контроля», можно ограничивать нашу «непослушную» таблицу.
- Ширина таблицы указывается в процентах от размера родительского элемента.
- Если у вас очень большая таблица, для корректного расчета ширины ячеек можно добавить строчку.