Это действительно кажется невозможным — если только вы специально не определите ширину и высоту каждой ячейки, что противоречит цели использования таблицы.
Возможные решения...
RGBA
Предполагая, что вы собираетесь использовать фоновые цвета, вы всегда можете использовать background-color: rgba(200,200,200,0.5) с откатом к сплошным цветам, если это не сработает. Поддержка RGBA есть во всех популярных браузерах, однако она не работает в IE8 и ниже...
Прозрачные PNG
Очевидный простой способ — вернуться к использованию прозрачных PNG, но тогда это зависит от того, что цвета, которые вы используете, являются предопределенными и довольно жесткими.
Используйте -moz-элемент
Другим безумным решением заставить FireFox работать (если вы используете фоновые изображения, а не цвета) было бы использование возможности background: moz-element(). Здесь вы создаете скрытые элементы на своей странице с каждой разной непрозрачностью, которая вам может потребоваться, и ссылаетесь на них в качестве фона через идентификатор. Например:
<div id="image1" style="background: url(image1.jpg); opacity: 0.5;"></div>
Затем укажите это на элементе, на котором вы хотите, чтобы фон отображался:
<td style="background: -moz-element(#image1);"></td>
Однако я не ручаюсь за этот метод, он довольно неэлегантен и специфичен для браузера. Tbh Я очень удивлен, обнаружив, что эту проблему действительно нельзя решить (особенно в FF), используя старые абсолютные и относительные трюки.
Не используйте таблицы
Более широкое решение, поддерживаемое браузером, состоит в том, чтобы отказаться от использования таблиц и воссоздать структуру таблицы, используя старые добрые элементы div и числа с плавающей запятой. Единственная проблема с этим решением заключается в том, что вам снова придется определять большую часть ширины и высоты, и вы не сможете добиться вертикального выравнивания ячеек, если не откажетесь от чего-то еще более экспериментального, например FlexBox.
person
Pebbl
schedule
29.06.2012
