background-size cover in a table

Question

Trying to use background size cover in a table and not getting the results I am after.

See: http://jsfiddle.net/pp9st63L/1/

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

The data columns (not including left most column) should be equal width, but the number of columns is variable. Sometimes 3 and other times 4 (including left headline column).

The width of these data columns should be equal and sufficient that the background image can cover. If there is any long data in the other. Currently the width of the columns is purely related to the data in those columns. I would like to override this behavior with CSS and set max widths for columns and make them equal width. So the background-size cover will work.

Any thoughts on how to get this to work?

Answer 1

Just delete display:block and max-width , use width for table cell . background-size:cover works for me. For some 'beautiful' you may also use background-position:50% 50% or background-position:50% 0px for images . For table-cells same width properties ( 30% 30% 30% or 30px 30px 30px 30px ) is a point to set those width always be the same.

PS Sorry for my very bad English.

UPD

Also set width for the first col

Example

UPD 2

Please check, that tr { td {...} } was error. You should use tr td {...} . Also check, that for set image properties you should use background-image property in tags . And width:auto I wrote specially to show that you don't need set width for narrow column to set it width to all other space of table. Also width for table-cell is a min-width . So, text in cells can change the width . But it could be change by hyphenation ( word-wrap ).

Example 2