html - background-size cover in a table -

trying use background size cover in table , not getting results after.

see: http://jsfiddle.net/pp9st63l/1/

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

the data columns (not including left column) should equal width, number of columns variable. 3 , other times 4 (including left headline column).

the width of these data columns should equal , sufficient background image can cover. if there long data in other. width of columns purely related data in columns. override behavior css , set max widths columns , make them equal width. background-size cover work.

any thoughts on how work?

thanks.

just delete display:block , max-width, use width table cell. background-size:cover works me. 'beautiful' may use background-position:50% 50% or background-position:50% 0px images. table-cells same width properties (30% 30% 30% or 30px 30px 30px 30px) point set width same.

p.s. sorry bad english.

upd

also set width first col

example

upd 2

please check, tr { td {...} } error. should use tr td {...} . check, set image properties should use background-image property in tags. , width:auto wrote specially show don't need set width narrow column set width other space of table. width table-cell min-width. so, text in cells can change width. it change hyphenation (word-wrap).

example 2