Глючный CSS для таблицы HTML - PullRequest
Новая
       15

Глючный CSS для таблицы HTML

0 голосов
/ 16 марта 2011

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

ОК, теперь по конкретике.

Я использую следующий код: http://snipplr.com/view/50733/buggy-css-for-an-html-table-example/.

По сути, это таблица HTML, стилизованная под немного CSS. Я использую коллапс, чтобы сделать границы 1 px, кстати.

Однако при просмотре конечного результата в Firefox и Chrome всплывают 5 странных проблем:

  1. Кажется, я не могу сделать стол того размера, который мне нужен. Общий размер должен быть 688x27 пикселей (с отступами и границами), но в Firefox и Chrome размер не соответствует назначению (я подозреваю, что мой код неправильный ...). Отображается как 688x29px!

  2. По какой-то странной причине я также не могу ограничить общий размер некоторых ячеек тем, что я хочу. Это относится к 3 ячейкам, которые содержат только изображение внутри них (ячейки со следующими классами: .td-bluebg, .td-description, .td-collapse). Размеры изображений составляют 25x25, 26x25 и 25x25px соответственно. Я просто хочу, чтобы они оставались в своих ячейках таблицы, без каких-либо отступов, и были окружены границей таблицы в 1 пиксель. Для ячейки .td-bluebg и всей таблицы есть дополнительные 2 пикселя внизу (см. Проблему 1.), которые легко обнаружить в Chrome (я пытаюсь найти способ избавиться от них).

  3. Мне удалось соединить простой эффект "изображение при наведении мыши" на "?" значок (в ячейке с классом .td-bluebg). Тем не менее, наведенное изображение показывает 2px отдельно от границы таблицы. Можно ли разместить изображение наведения только на расстоянии 1 пикселя от границы таблицы? Я пытался это сделать, но, увы, безуспешно. Мои попытки найти решение чуть не сломали весь стиль в один момент, но я восстановил старую версию CSS-кода для эффекта наведения и поместил некоторые ненужные объявления CSS в /* */ случайных скобках комментариев, и это помогло мне отменить это ошибка. Итак, как вы будете делать показанное при наведении изображение на расстоянии всего 1 пикселя от границы таблицы?

  4. Кажется, я не могу установить размер ячейки .td-collapse на то, что я хочу ... он просто растягивается до конца таблицы, а не остается на своем конце и с размером, который предназначен ... исправить?

  5. В текущем коде я объявил: 

    table.gridtable1 td {
border-color: #219DEC; /* AnimeRulezzz blue */
border-style: solid;
border-width: 0px;

    Если я хочу вернуться к границе 1px для отдельных ячеек (td's), есть ли способ скрыть левую и / или правую границу некоторых отдельных ячеек, если эта опция объявлена ​​как (т.е. если я установил таблицу .gridtable1 td {border-width: 1px;})?

P.S. Извините за код спагетти, как я уже сказал, я новичок. ^ _ ^;

Ответы [ 2 ]

1 голос
/ 16 марта 2011

Давайте посмотрим.

Помните, что margin, padding, border и некоторые другие свойства CSS увеличат вашу физическую ширину и высоту.Поэтому они добавят в ваши свойства width и height, если вы их указали.

Чтобы ограничить размер ячеек, я рекомендую вам использовать CSS, чтобы убедиться, что ваш браузер не использует свой собственныйсвойства CSS по умолчанию.Назначьте для своих ячеек свойства margin, padding и т. Д., Чтобы убедиться в отсутствии дополнительных стилей.

Используйте background-position и связанные свойства background для точной настройки стиля. w3 школ имеет отличные учебники по CSS и свойствам фона.

Для сворачивающейся ячейки проверьте, правильно ли вы установили свойство height CSS.Для элементов <table> и <td> может потребоваться указать свойство height в HTML.Я удалил таблицы для div, я рекомендую вам сделать то же самое.

Вы можете указать конкретные свойства границы для каждой стороны элемента с помощью border-left, border-right и т. Д. Сокращенное свойство имеет вид border:1px 2px 3px 2pxчто означает border:top right bottom left.Посетите веб-сайт школы w3 для получения дополнительной информации.

Не стесняйтесь комментировать, если я что-то пропустил:)

Редактировать: Лично мне не понравился пример, на который вы ссылались,так как это было действительно долго: \ проще, если вы дадите нам свою HTML-страницу (с CSS) без всех больших блоков комментариев и контента.Просто простой HTML и CSS.

0 голосов
/ 16 марта 2011

Что касается дополнительного пространства изображений, изображения по умолчанию располагаются на базовой линии текста их строки, а не в нижней части их строки.

Если ваши изображения находятся в своих ячейках таблицы,Вы можете исправить это, применив к ним display: block;.

...