Как я могу управлять форматом таблицы?

Artik1

Привет: Я нет нуб. Я пишу HTML уже 20 лет. Я пытаюсь создать таблицу динамически и не могу ее правильно отформатировать.

Первый ряд должен иметь определенную высоту.

Второй ряд должен быть другой удельной высоты.

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

То же самое и для столбцов.

Как только я заполняю ее данными, формат таблицы полностью уничтожается.

Я установил tr & td max-width, max-height; Я установил свойства ширины и высоты на td вне CSS; Я установил переполнение: скрыто.

CSS, казалось бы, случайно, игнорирует все, что я ему говорю.

Как только он видит данные (через javascript), он уничтожает размеры td.

Есть любой способ управления макетом таблицы без использования table-layout: исправлено ??

Я бы даже использовал это, за исключением того, что мне нужно, чтобы ширина первого и второго столбцов отличалась от остальных.

Я думал об использовании сетки, но она не может свернуть или измениться.

«Сетка» должна оставаться одинакового размера независимо от того, что в нее входит.

Banned666

Спасибо. «НИ ОДНО измерение не должно расти» правильно. «Он также не хочет, чтобы ВЫСОТА ячеек данных росла!» Правильный. «Это транслируется на проектор, где такие вещи, как прокрутка в ЛЮБОМ направлении, затруднены/невозможны или просто заноза в заднице».ДА! Я ценю ваши комментарии, но полностью с вами не согласен. Я не думаю, что W3C имеет право диктовать, что мне делать с этой технологией. Это технология, а не философия.
Есть ли способ сделать то, что я пытаюсь сделать? Если нет, я просто использую слои и программно обрезаю данные с помощью Javascript.

uaseo

УХ ТЫ! Спасибо. Я никогда не слышал, чтобы кто-нибудь так описывал html/css. "никогда не сталкивался с понятием "семантической разметки"?" никогда. Для меня «Отделение презентации от контента» означало отделение программирования от отображения. Это означало, что HTML следует хранить отдельно от VB, Java, C#, php, SQL, XML (и обычно Javascript). Вы меня заинтересовали.

Мне нравится идея отделить HTML-разметку от ее внешнего вида. Я думаю ты прав.

Это может сделать все намного проще и очень быстро. Я проигнорировал многое из того, что читал, потому что это выглядело как ерунда.

Я вижу здесь, вы вполне согласны.

Проблема, конечно, в том, чтобы определить, что важно, а что нет.

Мне придется вернуться и тщательно изучить спецификацию HTML5 (потому что с программированием, графическим дизайном, копирайтингом и маркетинговой стратегией - не говоря уже о соло-гитаре - мне не хватает того, чтобы успевать).

Опять же, я вполне убежден, что многое из того, что есть в спецификации HTML5, — ерунда.

Если что-то не имеет практического применения, мне плевать на это.

Я никогда не уважал CSS.

Мне это никогда не помогало.

Разве максимальная ширина не должна означать, что элемент НИКОГДА не будет шире?

А как насчет вертикального выравнивания? Я, вероятно, тоже мог бы больше изучать CSS (опять же, потому что мне не так уж много нужно изучать).

Мне придется принять во внимание, что HTML НЕ является дизайном, о чем я никогда не задумывался (программирование это не дизайн). Несмотря на все ваши разглагольствования, я подумал: он, вероятно, довольно хороший веб-дизайнер, но слишком погряз в правилах и положениях, чтобы быть очень практичным.

После того, как вы убедили меня взглянуть на ваш код, мне пришлось переосмыслить это. Ваш код был чистым, кратким и эффективным.

Я не привык видеть это с html и css.

Однажды в ясную луну я встретил кого-то, кто действительно умеет думать, действительно может хорошо что-то делать.

Я думаю, ты один из них (к моему большому удивлению).

Мне придется за вами присматривать, может быть, начать читать ваш блог (потому что мне нечего читать).

Еще раз спасибо за подробное объяснение.

Вы заставили меня задуматься о html и css немного по-другому.

sheynhjk

Обычно таблицы предназначены для динамического макета контента, а не для таких вещей, как «фиксированная высота» — их приоритетом является отображение данных, а НЕ конкретного макета, поэтому это НЕ инструмент макета, а семантический контейнер.

В нем говорится: «Это табличные данные», где строки и столбцы имеют семантическую связь.

Таким образом, учитывая то, что вы спрашиваете о таблицах, возникает вопрос: «Это вообще табличные данные?»

Если это табличные данные, используете ли вы полную и правильную семантику таблицы с CAPTION, THEAD, TBODY, TH и SCOPE?

В целом, хотя «должен оставаться одинакового размера, независимо от того, что в него помещено», это АНТИТЕЗА хорошего веб-дизайна, концепция, которую вы даже не должны рассматривать в первую очередь - НО всегда есть исключения.

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

Я имею в виду, что если вы думаете о каких-то сетках, а это на самом деле НЕ табличные данные с семантическими отношениями, вы можете рассмотреть что-то вроде модуля CSS3 Grid Layout.

Он относительно новый, не существует в IE9/более ранних версиях и требует префиксов в 10, 11 и ранних версиях Edge, но за последний год все современные браузеры добавили полную поддержку; Even Edge добавил текущую спецификацию еще в октябре.

НЕ то, что «сетки» также являются хорошим веб-дизайном, поэтому, даже когда я использую «сетки», у меня обычно все еще есть по крайней мере одна колонка «жидкая», а остальные эластичные.

Анна Ч.

Вы решили это, а я пропустил. Извините за это и спасибо.
Ваш CSS — действительно отличный код. Я всегда ненавидел CSS.
Мне пришлось отказаться от своего первого сайта, использующего CSS, потому что браузеры еще не умели использовать CSS.
Это заставит меня изучить его немного больше.

Когда я написал, что могу использовать div в слое, я понял, что этот слой мне не нужен, и div, вероятно, решит эту проблему.
Ваш пример — отличный код — простой и эффективный.
После всех этих разглагольствований я, признаться, удивлён. Вы действительно являются хорош в этом.

Я действительно не ожидаю, что пользователи смогут видеть заметки в сетке.
Приложение будет использоваться в конференц-зале на групповом собрании.
Участники добавляют заметки в сетку из другого интерфейса своих мобильных телефонов.
Ведущий щелкнет ячейку, и она переместится в центр экрана, чтобы можно было легко ее прочитать.
Это прекрасно работает, за исключением того, что заметки продолжали портить сетку.

По вашим правилам мне, вероятно, пришлось бы помещать 3/4 того, что я делаю, в апплет.
Все это основано на облаке, так что да, программное обеспечение использует php/html/css/javascript.
Это проще, чем создавать апплеты, и более надежно в развертывании.
Я использую php/html/css/javascript (на самом деле классический сценарий ASP и VB) для создания приложений в течение очень долгого времени.
Ларри Эллисон (Oracle) предложил это давным-давно. Я делал это тогда.

Я никогда не слышал, чтобы кто-нибудь говорил о правилах HTML так, как вы.
Это есть в документации W3C? Где ты достала это?

lexus355

Если только я полностью не пропустил то, о чем он просил - НЕТ полос прокрутки ЛЮБОГО направления (вверх или вниз) - это было бы совершенно не связано. Таблица по-прежнему будет расти вертикально. Также предполагается, что весь его контент представляет собой текст, но это может быть и не так...
НО вы МОЖЕТЕ быть правы, поскольку нам никогда не показывали данные. ДАННЫЕ определяют разметку, ДАННЫЕ + разметка + возможности устройства определяют макет, а НЕ наоборот!

simplysoo1

Просто добавьте этот дополнительный DIV, и все должно работать.

Я также уменьшил ширину первой строки TH, чтобы показать вам, где и как она установлена.

Просто позвольте всему остальному автоматически настроиться и заполниться равномерно.

Вот где МНОГИЕ люди, работающие с макетами, облажаются, думая, что им нужно объявлять ширину для всего, вместо того, чтобы объявлять только одну часть и позволять остальным делать то, что они делают естественным образом.

Я соединил это в небольшой демо-версии с некоторым lorem-ipsum, подключенным к полям данных для тестирования на моем сервере:

http://www.cutcodedown.com/for_others/softLink/template.html

Как и во всех моих примерах, каталог:
http://www.cutcodedown.com/for_others/softLink/

Широко открыт для легкого доступа к липким кусочкам. Надеюсь, это поможет.

То, что вы пытаетесь сделать, на самом деле не то, для чего предназначен HTML, поэтому могут возникнуть некоторые проблемы.

Даже с этими исправлениями, если окно слишком короткое, чтобы вместить хотя бы содержимое TH, оно даст вам вертикальную полосу прокрутки - и я бы оставил это так.

Однако с точки зрения ваших данных это должно быть все, что вам нужно.

Просто имейте в виду, что это закодировано для современных браузеров, это не будет работать ни в ЛЮБОЙ версии умственно ослабленного крушения поезда, которым является IE... но, поскольку вы сказали «приложение», я думаю, что это не проблема, поскольку это подразумевает, что у вас есть реальное контроль над тем, какой движок браузера используется.

(обычно либо Blink, либо EdgeHTML). По какой-то причине, если вы абсолютно позиционируете элементы внутри TD в IE, вы не можете извлечь ширину и высоту родительского тега.

Я подозреваю, что это часть спецификации «родитель не имеет высоты», которая соблюдается в том месте, где ее следует игнорировать, поскольку TD не являются блочными, это особый случай. Но если все, что вас волнует, — это Blink, Quantity или EdgeHTML, это должно сработать.

Я думаю, что наследие Gecko также идет вразрез с этим, но не цитируйте меня по этому поводу. Учитывая количество проблем с багзиллой, которые сейчас достигли возраста, с которого разрешено употребление алкоголя, я почти уверен, что видел это раньше. Если вам нужна устаревшая поддержка IE... ну, тогда вам, вероятно, придется переопределить display:table, table-row и table-cell и принудительно перевести их в режим display

lock и поведение float, flex или css-grid.

Шутка в том, что в IE9/более ранних версиях последних двух из них нет.

Ох, и извините, что я не делал этого в codepen, но я считаю бесполезно неразборчивую цветовую подсветку синтаксиса (никогда не был поклонником этой хреновины) и еще более бесполезно крошечные окна редактора - полный мусор.

Не фанат.

forumchanin

Deathshadow Спасибо за ответ.

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

Честно говоря, мне плевать, что такое «хороший дизайн».

Мне нужна сетка, которая сохранит тот размер, который я сделал, прежде чем в нее будут помещены данные.

Ему нужно просто обрезать (переполнение: скрыто) все, что не подходит.

Мы могли бы спорить несколько дней о том, что такое «хороший дизайн», но, короче говоря, я с вами категорически не согласен.

Таблица html НЕ должна ограничивать мое использование.

Я не знаю, на каком основании вы делаете такое заявление. Мое отношение - таблично-бессмысленное.

Я хочу того, чего хочу. Если бы я настаивал на общей ширине 500 пикселей и шести столбцах, каждый из которых имел бы ширину 100 пикселей, это было бы логичной проблемой. Это не относится к делу. Мне нужен стол, который будет НЕТ расти. Это для приложения, использующего проектор. При необходимости он должен обрезать данные. Это не могу расти. НЕТ полос прокрутки! Я создал codepen.io, который мы можем использовать для тестирования.
https://codepen.io/SLSCoder/pen/aYMxXo?editors=0100

Я не могу заставить границы работать.

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

Он должен обрезать данные. Любая помощь будет принята с благодарностью.

etmelis

HTML-теги существуют по ПРИЧИНЕ, у них есть ЗНАЧЕНИЯ, которые напрямую связаны с их внешним видом.

Таким образом, если вы выбираете HTML-теги на основе того, как вы хотите, чтобы все выглядело, вы выбираете неправильные теги по совершенно неправильным причинам!

Нам удалось уйти от этого во время войн браузеров, когда Microshaft и Nutscrape продолжали пытаться превзойти друг друга с помощью презентационной чуши в разметке, что привело к неудавшемуся крушению поезда, которым был HTML 3.2 с его умственно ослабленными FONT, CENTER, ALIGN.

, BGCOLOR и прочая чушь, которая устарела в HTML 4 Strict.

Естественно, хотя большое количество болтунов продолжали использовать 4 tranny, не осознавая, что «переходный» буквально означает «переход от 1997 к 1998 годам практики разработки» - причина, по которой многие называют HTML 4 Strict «настоящим HTML». Многие из них, включая меня, не в восторге от нового якобы структурные теги в HTML 5, которые представляют собой не что иное, как повторное введение старых избыточностей и создание совершенно новых! Эта семантика в сочетании с CSS позволяет поддерживать «отделение представления от контента» — так что одну разметку можно использовать для множества различных представлений и доставлять на устройства, к которым даже ТЕРМИН «внешний вид» даже не применим.

Тег LINK даже имеет атрибут MEDIA, чтобы указать, ДЛЯ КАКИХ мультимедийных устройств предназначены ваши конкретные инструкции по стилю и внешнему виду - экран, проекция, печать, звук и т. д. Фактически, опускание атрибута media или использование «все» в качестве значения ТАКЖЕ некомпетентный мусор.

В 99%+ случаев, когда вы видите , в котором отсутствует media="", человек, написавший его СНОВА, недостаточно знает HTML, чтобы вообще использовать этот язык.

Такое разделение также позволяет использовать несколько скинов в одной унифицированной разметке даже для одной и той же цели мультимедиа.

Теоретически в идеальных обстоятельствах это позволяет вам полностью изменить дизайн всего сайта БЕЗ необходимости существенно менять разметку.

В ЭТОМ-ТО И ДЕЛО! Вышеупомянутое разделение, помогающее упростить обслуживание, лучше использовать модели кэширования и т. д. и т. п., — это просто вишенка на торте.

ХОТЯ именно поэтому использование

samolisov

это все правда но краткий ответ может быть просто

  word-break: break-all;

Код (разметка):

kolpakov1

Это не «просто технология», это ИНСТРУМЕНТ, разработанный для конкретной цели с использованием ПРАВИЛ.

Вот почему все не является DIV и почему вы не можете просто создавать свои собственные теги любым старым способом, как это можно сделать в XML.

Эти ПРАВИЛА существуют по ПРИЧИНЕ — этой причиной является дизайн доступности и доставка контента. То, что вы пытаетесь сделать, НЕ является тем, для чего были созданы HTML или CSS.

Совсем.

Контейнеры с фиксированной высотой идеального размера экрана — АНТИТЕЗА доступного веб-дизайна.

Вы используете технологии веб-дизайна, но пытаетесь сделать нечто ПРОТИВОПОЛОЖНОЕ тому, для чего они были созданы. Подумайте об этом так: вы пытаетесь закрутить винт молотком.

Это НЕПРАВИЛЬНАЯ технология для того, что вы пытаетесь сделать.

То, что вы пытаетесь сделать, больше похоже на работу для Powerpoint или собственного языка разработки, а не на HTML или CSS. Разметка и таблицы стилей просто НЕ были созданы для того, чтобы делать то, что вы просите.

Совсем.

НЕ то, ДЛЯ чего они предназначены.

Похожие темы	Дата
Пользовательские размеры изображения для каждой категории	19.10.2024, 18:10
Таблицы Wordpress разные в Chrome	19.10.2024, 18:10
Вы заинтересованы в новом способе монетизации своего блога?	19.10.2024, 18:10
Помощь с исправлением формы Javascript	19.10.2024, 18:10
Как показать избранное изображение вместо контента публикации?	19.10.2024, 18:10
Циклическое переключение изображений разного размера при прокрутке	19.10.2024, 18:10
Раздача подарков для блоггеров: 200 долларов США + 4 лицензии на аудиорекордер премиум-класса Cinch.	19.10.2024, 18:10
CSS и SVG-фильтры: текстовые эффекты 80-х годов	19.10.2024, 18:10
гибкий, не растет до полной высоты	19.10.2024, 18:10
Какая CMS лучше всего подходит для галерей/подгалерей участников	19.10.2024, 18:10

Как я могу управлять форматом таблицы?

Artik1

Banned666

uaseo

sheynhjk

Анна Ч.

lexus355

simplysoo1

forumchanin

etmelis

samolisov

kolpakov1

I AM

Интересно