обложка размером с фон в таблице

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

См.: http://jsfiddle.net/pp9st63L/1/.

.image th {
    background-size: cover !important;
    height: 300px;
    width: auto;
}

Столбцы данных (не включая крайний левый столбец) должны иметь одинаковую ширину, но количество столбцов может быть разным. Иногда 3, иногда 4 (включая левую колонку заголовка).

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

Любые мысли о том, как заставить это работать?


html css css-tables background-size
person Martin    schedule 01.12.2014    source источник
comment
stackoverflow.com/questions/4019604/   -  person Pevara    schedule 02.12.2014

Ответы (1)


arrow_upward
1
arrow_downward

Просто удалите display:block и max-width, используйте width вместо table cell. background-size:cover у меня работает. Для некоторых «красивых» вы также можете использовать background-position:50% 50% или background-position:50% 0px вместо images. Для table-cells одних и тех же width свойств (30% 30% 30% или 30px 30px 30px 30px) необходимо установить, чтобы эти width всегда были одинаковыми.

P.S. Извините за мой очень плохой английский.

UPD

Также установите width для первого col

Пример

ОБНОВЛЕНИЕ 2

Пожалуйста, проверьте, что tr { td {...} } было ошибкой. Вы должны использовать tr td {...} . Также проверьте, что для установленных свойств изображения вы должны использовать свойство background-image в tags. И width:auto я написал специально, чтобы показать, что вам не нужно устанавливать width для узкого столбца, чтобы установить его ширину для всего остального пространства таблицы. Также width вместо table-cell является min-width. Итак, текст в cells может изменить width. Но it можно было бы изменить с помощью дефиса (word-wrap).

Пример 2

person CnapoB    schedule 01.12.2014
comment
Спасибо @cnapoB - если вы удалите этот 4-й столбец, столбец заголовка (левый) больше не будет узким (› ширина: 60 ​​пикселей;), см.: jsfiddle.net/pp9st63L/5 - person Martin; 02.12.2014
comment
@Мартин, пожалуйста, смотрите UPD2 - person CnapoB; 02.12.2014