Разделение таблицы ячеек на два треугольника с двумя разными цветами в HTML

Question

Я заполняю таблицу, и каждая ячейка представляет для состояний: NULL, a, b, a & b.

Я собирался использовать цвет (фон?) Для предоставления этой информации.Имея пустые ячейки NULL, ячейки синего цвета, ячейки B красного цвета и ячейки a & b ячейки, разделенные на два треугольника: один красный и один синий.Я пытался сделать клетку фиолетовой (фиолетовый = красный + синий), но она недостаточно интуитивна.

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

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

Я пытался добавить изображение как<img src...> но опять же, не зная размера ячейки, он в итоге накладывает каждый свой размер и выглядит некрасиво.

У меня есть Googled, и похоже, что CSS3 дает возможность растягивать фон ячейки.Но в то же время можно ли что-нибудь сделать?

Answer 1

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

Answer 2

Действительно, вы не можете растягивать фоновые изображения (по крайней мере, без CSS3 или некоторых сценариев JavaScript) Связанные .

Я думаю, клетчатый мозаичный узор (квадраты 2х2, наполовину синий, наполовину красный)или с вертикальными или горизонтальными полосами, это самый простой способ ... Хотя я сомневаюсь, что это будет выглядеть красиво.

Answer 3

сделать div (ширина / высота = 0) с изображением (ширина / высота = 100%) в нем в тд. (div должен начинаться с 0, чтобы не увеличивать ячейку). Создайте jquery, который проходит по каждой ячейке и устанавливает размер внутреннего div = равный размеру содержащего td Не уверен, сколько результатов вы смотрите, так что это может быть непрактично для тысяч ячеек, но вам придется попробовать и посмотреть. Если вам нужна помощь с конкретным кодом, я могу помочь.

Answer 4

Чтобы получить желаемый эффект, CSS3, вероятно, будет вашим лучшим выбором. Проверьте CSS3 градиенты, которые вы можете использовать в фонах. Они немного лучше поддерживаются, чем растяжение изображения. Даже IE сделает это с помощью своей системы фильтрации, хотя ни одна версия не может сделать диагональ, поэтому для IE она должна быть горизонтальной или вертикальной. В зависимости от ваших предполагаемых поддерживаемых браузеров, это может быть или не быть большой проблемой для вас.

Вы также можете прикрепить изображение в полях в тегах <img>, установить низкий z-индекс и задать для свойств высоты и ширины значение 100%. Это должно сработать, хотя оно добавляет постороннюю разметку и может быть сложнее в обслуживании.