[英]background-size cover in a table
Trying to use background size cover in a table and not getting the results I am after. 尝试在表格中使用背景尺寸封面,但没有得到我想要的结果。
See: http://jsfiddle.net/pp9st63L/1/ 请参阅: 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).
有时是3次,其他时候是4次(包括左标题栏)。
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.
我想用CSS覆盖此行为,并为列设置最大宽度,并使它们的宽度相等。 So the background-size cover will work.
因此背景大小的封面将起作用。
Any thoughts on how to get this to work? 关于如何使它起作用的任何想法?
Just delete display:block
and max-width
, use width
for table cell
. 只需删除
display:block
和max-width
,对table cell
使用width
。 background-size:cover
works for me. background-size:cover
对我有用。 For some 'beautiful' you may also use background-position:50% 50%
or background-position:50% 0px
for images
. 对于某些“美丽”的图片,您还可以使用
background-position:50% 50%
或background-position:50% 0px
用于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. 对于
table-cells
相同width
属性的table-cells
( 30% 30% 30%
或30px 30px 30px 30px
),可以将这些width
设置width
始终相同。
PS Sorry for my very bad English. PS对不起,我的英语不好。
UPD UPD
Also set width
for the first col
同时设置第一个
col
width
UPD 2 UPD 2
Please check, that tr { td {...} }
was error. 请检查
tr { td {...} }
是否错误。 You should use tr td {...}
. 您应该使用
tr td {...}
。 Also check, that for set image properties you should use background-image
property in tags
. 还要检查,对于设置的图像属性,应在
tags
使用background-image
属性。 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. 和
width:auto
我特意写表明你并不需要设置width
窄列设置宽度表中的所有其他空间。 Also width
for table-cell
is a min-width
. 还
width
为table-cell
是一个min-width
。 So, text in cells
can change the width
. 因此,
cells
文本可以更改width
。 But it
could be change by hyphenation ( word-wrap
). 但是,
it
可能是由连字符(变化word-wrap
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.